JavaScript 关于this的理解

this是一个挺神奇的东西,经常不知道它绑定到了那里 ,因此出来了各种绞尽脑汁的面试题。

例1

<script>
    var person={};
    person.name='li';
    person.sayname=function(){
            alert(this.name);
    };
    var name='wang';
    person.sayname();//alert li
</script>

上述代码最后会弹出 li ,这个例子比较简单,因为闭包会返回创建的环境,person.sayname()是在对象person内创建的,最后一行代码 person.sayname();

只是去对象person内调用这个函数

例2

<script>
    var person={};
    person.name='li';
    person.sayname=function(){
        return function(){
            alert(this.name);
        }
    };
    var name='wang';
    person.sayname()();//alert wang
</script>

上述代码会弹出 wang ,对象内person.sayname对应的是一个函数,这个函数内部还会返回一个函数,此时外层的函数是在person对象内定义的,因此它里

面的this绑定的是person对象,当在里面返回另一个函数时,这个返回函数会将创建环境内的变量对象放入自己的定义域,此时返回函数里面是不应该使用this的

(使用WebStorm时,内层函数里面的this会报错:Potentially invalid usage of this),因为此时返回函数里的this没有绑定到任何对象。当最后一行代码

person.sayname()();在window对象下运行, person.sayname()会返回内层函数,这个内层函数此时在闭包的环境内没有绑定this,会向上绑定到window对

象上,就会相当于alert window.name ->wang;

例3

<script>
    var person={};
    person.name='li';
    person.sayname=function(){
        var that=this;
        return function(){
            alert(that.name);
        }
    };
    var name='wang';
    person.sayname()();//alert li
</script>

上述代码会弹出 li ,person.sayname对应的函数,外层函数内that=this;返回函数内引用了变量that,that指向this,this又,因此闭包返回的环境中将包含整个

person对象,而that直接指向person对象,最后一行代码 person.sayname()();返回函数将会alert person.name。

原文地址:https://www.cnblogs.com/xueandsi/p/5981245.html