关于for循环里this跟数组的问题

Question

for循环里用aTR[i]就没效果，我测试了下aTR[i]里面i的值是aTR[i].length，但是aTR[i]在for循环里，为什么不会被循环到直接i值就是aTR[i].length呢？执行过程是什么？

Answer 1

这与闭包有关，i是绑定在其作用域所在的函数，在循环的额每次迭代中，循环体都会为嵌套函数（这里是mouseover的事件处理程序）创建一个闭包，而闭包存储的是变量i的引用，由于每次迭代后，i的值均在变化，因此内部函数最终得到的就是i最后的值（aTR.length）。

可以利用IIFEs来创建局部作用域，改成这样：

for(i = 0; i < aTR.length; i++){
    (function(j){
        aTR[j].onmouseover=function(){
            aTR[j].style.background="#ccc";
        }
    })(i);
}


//下面的等效

for(i = 0; i < aTR.length; i++){
    (function(){
        var j = i;
        aTR[j].onmouseover=function(){
            aTR[j].style.background="#ccc";
        }
    })();
}

关于IIFEs，可以看看这篇文章：Immediately-Invoked Function Expression (IIFE)

Answer 2

需要在每一次循环的时候，保存当时的i的值，所以需要用闭包~

那么如果不保存i的值的话，最后一次i的值就是结束循环的值再加1，就是length的值。

Answer 3

页面加载的时候，for循环已经运行了一遍，此时i=aTR[i].length；等你用鼠标滑过的时候，i值根本就不会变化，如果你想要鼠标滑过都能获得i的值，必须缓存i，可以这么做

for (var i = 0; i < aTR.length; i++) {
    (function(j){
       aTR[j].addEventListener("onmouseover", function(e) {
            aTR[j].style.background=#ccc;
        }, false);
    })(i) ;
}

Answer 4

用jquery $.each