闭包循环问题--for循环只显示最后一个i的值

<div>DIV 0</div>
<div>DIV 1</div>
<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        divs[i].addEventListener("click",function(){
            alert("divs #" +i+ "was clicked.");
        },false);
    }
</script>

这段代码主要用来操作2个div,哪个div被点，然后弹出框提示第i个div被点;

问题是：无论点哪个div,弹出框提示的始终都是第二个div被点了。

以上代码中遇到了一个使用闭包和循环时常见的问题，也就是说函数绑定之后，闭包抓取的变量被更新了。这意味着，每一个绑定的函数处理程序都会一直显示i最后的值；

 

处理代码如下

<div>DIV 0</div>
<div>DIV 1</div>
<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) (function(n){
        divs[n].addEventListener("click",function(){
            alert("div #" +n+ "was clicked.");
        },false);
    })(i);
</script>

<div>DIV 0</div>
<div>DIV 1</div>
<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) (function(n){
        divs[n].addEventListener("click",function(){
            alert("div #" +n+ "was clicked.");
        },false);
    })(i);
</script>

加入一个即时函数，注意 for (var i = 0; i < divs.length; i++) 后面的代码的写法(即时函数的写法)。

首先解释一下即时执行函数；

（function(){})();

简写（......）();

第一对括号内是一个函数体(表达式)，这对括号仅用于划定表达式的范围；
第二对括号内是一个操作符，表示立即执行上面的表达式；而第二对括号内的值(如果有的话)，就是执行上面表达式所需要的参数(也分实参、形参)

fo循环里，i的值变化，n的值也会跟着变化(当然要变化啦，i是实参，n是形参)

通过在for循环内加入即时函数，我们可以将正确的值传递给即时函数，进而让处理程序也得到正确的值。这意味着，在for循环每次迭代的作用域中，i变量都会重新定义，从而给click处理程序的闭包传入我们期望的值。