Question

会javascript的大神们来看看这段代码 搞不懂this

上图是代码 运行结果如下 我的目的是要把旁边的按钮按下以后也变成黄色 使用图中画横线的代码就报错
替换成this就好了 为什么！！





Answer 1

因为i和aBtn定义在同一个地方，当onclick运行时，i=aBtn.length。
因此数组越界，aBtn[i]=undefined
改成this就正常了，因为onclick运行时，函数内的this对象就是点击的对象

追问

对不起 没看懂 什么叫i和aBtn定义在同一个地方？为什么一运行i=aBtn.length?额。。。。新人刚学js 所以问题较多 望谅解

追答

运行的时候有点像这样：

onload=function(){
    var oDiv,aBtn,i;
    oDiv=...
    aBtn=...
    i=0;
    for(;i<aBtn.length;i++){
        
    }
    //最后i=aBtn.length
}

追问

还是没看懂 怎么i=aBtn.length了......求大神耐心的给我这个小白讲解一下 拜托了！

追答

for循环过后，i=aBtn.length，你在onclick函数里的i还是这个i，除非你给每一次循环时，把这个i值保存起来，就没问题了，最简单的实现：闭包。

...省略N个字....
for(;i<aBtn.length;i++){
    aBtn[i].onclick=(function(i){
        return function(){
            aBtn[i].className="active";
        }
    })(i);
}
...省略N个字....

//相当于定义一个函数专门处理这个
...省略N个字....
var createClick=function(i){
    return function(){
        aBtn[i].className="active";
    };
};
for(;i<aBtn.length;i++){
    aBtn[i].onclick=createClick(i);//这样更好理解吧
}
...省略N个字....

Answer 2

onclick 是事件函数，也就是说定义完毕后，你没点它它是不会执行的，然而定义完毕后，for循环中的i已经遍历到了最后1个，也就是 i = aBtn.length,显然这个i是没有的，所以aBtn[i] 就会数组越界。换成this就没有这个问题了。

Answer 3

THIS指的是当前点击的这个元素，而你用aBtn[i],就是想指向当前的元素吧~但是你忽略了一个问题，那就是这里的i已经和上面的不一样了~现在这个i是另一个元素了，已经不是你之前的那个i了，所以你用i它根本找不到对应的下标，也就没法设置css了

Answer 4

因为for只是负责循环绑定click事件,不负责执行,当你点击出发执行onclick里面的内容时已经不再for里面了,所以找不到

Answer 5

你这个是绑定对象的click事件，你的方法没错，但在你点击input的时候，会执行你的方法体：
aBtn[i].className = "active"，但这个时候你的对象里没有aBtn变量，也不存在i,所以要用this代替当前点击对象。希望能帮助你