this赋值给局部变量

Question

在一个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);
        }

Answer 1

把onclick这里当作回调函数来看，this.index的this指向的是that.span[i]。

that.span[i].onclick=function(){
   that.show(this.index);
}

Answer 2

如果不在函数体内定义一个局部变量代替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对象，提高了运行的速度

Answer 3

这是一个闭包的应用,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);
}

Answer 4

我就说一句：

this的取值是跟它所在的上下文有关的。具体说就是跟它位于哪个函数中有关，以及跟这个函数被调用的方式有关。

具体到你的例子，如果不用that替换一下，而是直接用this的话。第二个函数中的this就变成了that.span[i]，而不是tab了。为什么呢？因为它所在的第二个函数是作为that.span[i]的方法被调用的。