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。