for循环中的i变量问题

1.如何点击每一列的时候alert 其index?

<ul id="test">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

window.onload = function (){
    var lis = document.getElementById("test").getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){

        lis[i].onclick = function(){
            alert(i); //每次都是4
        };
    };
}

解释：因为在for循环里面指定给lis[i].onclick的事件处理程序，也就是onclick那个匿名函数是在for循环执行完成后（用户单击链接时）才被调用的。而调用时，需要对变量i求值，解析程序首先会在事件处理程序内部查找，但i没有定义。然后，又到方法外部去查找，此时有定义，但i的值是4（只有i大于4才会停止执行for循环）。因此，就会取得该值——这正是闭包（匿名函数）要使用其外部作用域中变量的结果。而且，这也是由于匿名函数本身无法传递参数（故而无法维护自己的作用域）造成的。

2.解决办法

方法一：

window.onload = function (){
    var lis = document.getElementById("test").getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        (function(i){
            lis[i].onclick = function(){
                alert(i); //0123
            };
        })(i)
    };
}

解释：成功打印每个i的值，原理就是通过自执行函数，并且将变量i保存到这个自执行函数的参数中。

方法二：

window.onload = function (){
    var lis = document.getElementById("test").getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onclick=function(){
            alert(this.index); //0123
       };
    };
}

解释：

方法三：

window.onload = function (){
    var lis = document.getElementById("test").getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].onclick = (function(e){
            return function(){
                alert(e);//0123
            };
        })(i);
    };
}

解释：

3.其他尝试

3.1

for(var i=0;i<10;i++){
    function a(){
        console.log(i);
    }
    a(); //1,2,3,4,5....
}

解释：为什么这样就可以呢？因为你在循环变量i的时候已经执行了函数a，自然变量i是什么就打印出来什么。

3.2

window.onload = function (){
    var lis = document.getElementById("test").getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){

        lis[i].onclick = a();
        function a(){
            alert(i); //1,2,3,4.....
        }
    };
}

解释：虽然这样可以打印出每次的变量i的值，但是我们没有点击box的时候它已经执行完了，直接无视了点击事件，也就是说这个点击事件已经可有可无了，所以我们用这种方法在绑定事件中就显得不那么可用了。