在一个js写的tab组件里看到这么一段代码,很奇怪为什么要把this赋给that?this的指向不一直是tab对象吗?
tab.prototype.init=function(){
for(var i=0,len=this.span.length;i<len;i++){
var that=this;
that.span[i].index=i;
that.span[i].onclick=function(){
that.show(this.index);
}
}
this.show(1);
}
我就说一句:
this
的取值是跟它所在的上下文有关的。具体说就是跟它位于哪个函数中有关,以及跟这个函数被调用的方式有关。
具体到你的例子,如果不用that
替换一下,而是直接用this
的话。第二个函数中的this
就变成了that.span[i]
,而不是tab
了。为什么呢?因为它所在的第二个函数是作为that.span[i]
的方法被调用的。
如果不在函数体内定义一个局部变量代替this,this的指向很容易会指向全局对象window或者其他对象,譬如
function myobj() {
var that = this;
this.name='jone';
this.count = function(clickbutton) {
//计数器
$(clickbutton).live('click',function(){
alert(that.name);
});
}
}
var AD = new myobj();
AD.count('.cct');
这个例子中如果不用that代替this的话this会指向clickbutton,所以为了避免混淆,一般都会用一个that代替this;
在这个例子中,作者可能是想避免this指向全局对象window,所以用that代替this,而且另外一个好处是用that储存了这个this对象,在下边的查询中就可以避免重复查询this对象,提高了运行的速度
这是一个闭包的应用,onclick函数将要调用当前tab实例对象的show方法
如果如下调用而不保存当前对象的引用,那么在conclick函数的this将会是this.span[i]对应的对象,执行时可能因为这个对象没有show方法(不排除有)而报错~~~
this.span[i].onclick=function(){
this.show(this.index);
}
改成题目所示的写法,保存当前对象的引用,赋值给that,在click函数就能顺利的使用到实例对象
that.span[i].onclick=function(){
that.show(this.index);
}
代码还可以优化的哦
tab.prototype.init=function(){
var that=this;//赋值一次就好了
for(var i=0,len=this.span.length;i<len;i++){
this.span[i].index=i;
this.span[i].onclick=function(){
that.show(this.index);
}
}
this.show(1);
}
把onclick
这里当作回调函数来看,this.index
的this
指向的是that.span[i]
。
that.span[i].onclick=function(){
that.show(this.index);
}