上下文的引用
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
关于 this 我们之前已经做过讨论,它表示对调用对象的引用,而在闭包中,最容易出现错误的地方是误用了 this。在前端 JavaScript 开发中,一个常见的错误是错将 this 类比为其他的外部局部变量:
$(function(){
var con = $("di##anel");
this.id = "content";
con.click(function(){
alert(this.id);//panel
});
});
此处的 alert(this.id)
到底引用着什么值呢?很多开发者可能会根据闭包的概念,做出错误 的判断:
content
理由是,this.id
显示的被赋值为 content,而在 click 回调中,形成的闭包会引用到 this.id
, 因此返回值为 content。然而事实上,这个 alert 会弹出”panel”,究其原因,就是此处的 this,虽然闭包可以引用局部变量,但是涉及到 this 的时候,情况就有些微妙了,因为调用 对象的存在,使得当闭包被调用时(当这个 panel 的 click 事件发生时),此处的 this 引用 的是 con 这个 jQuery 对象。而匿名函数中的 this.id = “content”是对匿名函数本身做的 操作。两个 this 引用的并非同一个对象。
如果想要在事件处理函数中访问这个值,我们必须做一些改变:
$(function(){
var con = $("di##anel");
this.id = "content";
var self = this;
con.click(function(){
alert(self.id);//content
});
});
这样,我们在事件处理函数中保存的是外部的一个局部变量 self 的引用,而并非 this。这 种技巧在实际应用中多有应用,我们在后边的章节里进行详细讨论。关于闭包的更多内容,我们将在第九章详细讨论,包括讨论其他命令式语言中的“闭包”,闭包在实际项目中的应 用等等。
在线练习
{$ activeFileHint $}