• html 中绑定事件 this的指向


    var m=function(){

            alert(2);
        }
        var obj={
            A:function(){
            },
            m:function(){
                alert(3);
            },
            B:function(){
                var m=function(){
                    alert(1);
                };
                var div=document.createElement("div");
                div.innerHTML="<p onclick='m();'>xx</p>";
                document.body.appendChild(div);
            }
        };

        obj.B();

    看起来好像onclick=m()会调用B函数里头定义的m函数,其实不会。这里新增html,且是html行内触发事件,所以函数执行在全局,m()调的是全局定义的m函数,结果弹出2,和B函数作用域一点关系都没有。

    (2)

    潜在包含了一层匿名函数:

    例一:

    <p id="f" onclick="console.log(this)">1</p>,值为<p id="ff" onclick="console.log(this)">1</p>自己。

    这里相当于:

    (p#f).onclick=function(){

    console.log(this);

    };

    所以this当然是调用事件的p#f

    例二:

    <p id="f" onclick="function A(){alert(this==window);};A();">1</p>

    相当于:

    (p#f).onclick=function(){

    function A(){alert(this==window);};

    A();

    };

    所以A里头的this当然是window。

    例三:

    <p id="f" class="x" onclick="A(this)">1</p>
    <script>
            var A=function(m){
                alert(m.className);       //点击弹出"x"
            };
    </script>

    这里相当于:

    p#f.onclick=function(){

    A(this);

    };

    function体里的this必然是#f元素对象,所以可以弹出m.className。。

    例四:

    var m=function(){
                alert(10);
            }
            var obj={
                B:function(){
                    var m=function(){
                        alert(1);
                    };
                    var div=document.createElement("div");
                    div.innerHTML="cutemurphy";
                    div.id="gg";
                    document.body.appendChild(div);
                    document.getElementById("gg").addEventListener("click",m,false);
                }
            };
            obj.B();      // 1

    这个结果恰好和行内执行事件的结果相反,这里会弹出1,而非10。因为它的m函数并非去全局找,而是按照普通的函数作用域链来查找。。。理论支持是函数执行在定义的作用域里。

    例五:

    var obj={
            A:function(){
                console.log(this);
            },
            B:function(){
                var m=function(){
                    alert(1);
                };
                var div=document.createElement("div");
                div.innerHTML="<p id='xx'>xx</p>";
                document.body.appendChild(div);
                var xNode=document.getElementById("xx");
                xNode.addEventListener("click",this.A,false);
            }
        };
        obj.B();     // xNode;

    这里很有意思,addEventListener里的this.A的this指的是obj,而this.A的函数体function(){console.log(this)}里的this又是xNode。

    参考:

    http://www.cnblogs.com/snandy/archive/2011/03/07/1976317.html

  • 相关阅读:
    Docker的镜像与容器
    【目标检测】YOLOv4中的Mish激活函数
    【深度学习】医学图像分割损失函数简介
    【深度学习】归一化方法
    【机器学习】Bagging与Boosting算法原理小结
    【目标检测】RCNN算法
    【机器学习】误差逆传播算法(反向传播算法)
    【机器学习】解决数据不平衡问题
    【干货总结】| Deep Reinforcement Learning 深度强化学习
    【深度学习】迁移学习Transfer Learning
  • 原文地址:https://www.cnblogs.com/vali/p/5941367.html
Copyright © 2020-2023  润新知