在之前的JS闭包问题(一)文章中大概介绍了一下JS闭包,同时讲了闭包与变量之间的问题,今天我们继续聊闭包,聊聊闭包与this对象之间的问题。
我们知道,this指向当前对象,而在全局环境中,this就等于window对象,举个例子:
var name = "The Window";
var object = {
name: "My Object",
getName: function(){
return this.name;
}
}
alert(this); // [object Window]
alert(this.name); // "The Window"
alert(object.getName()); // "My Object"
上面例子很好理解,在全局环境中,name == window.name == this.name,而object.getName中的this指向object。
那么遇到闭包又会是什么样的结果呢?我们接着往下看:
var name = "The Window";
var object = {
name: "My Object",
getName: function(){
return function(){
return this.name;
}
}
}
alert(object.getName()()); // "The Window"
通常情况下,匿名函数的执行环境具有全局性,this对象指向window,所以上面例子中返回 "The Window"。但是,也存在例外的情况:
① 通过call()或者apply()改变函数的执行环境,这时this会指向其他对象
比如还是上面这个例子,只不过最后改成这样:
alert(object.getName().call(object)); // "My Object"
虽然还是执行同样一个匿名函数,但是执行环境却强制改成了object,这时的this就指向了object。
② 给HTML元素添加事件,这时匿名函数中的this会指向该事件所在元素
例如:
<input type="button" id="btn" value="点击我吧" />
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
alert(this.value); // "点击我吧"
}
oBtn.addEventListener('click',function(){
alert(this.value); // "点击我吧"
});
可以看出,不管哪种绑定事件方式,匿名函数中的this对象均指向oBtn。
总而言之,this对象是在运行时基于函数的执行环境绑定的。