javascript - js闭包在循环语句中的一个问题

Question

<script>
    window.onload=function(){
        var lis=document.getElementsByTagName('li');
        var len=lis.length;
        for (var i = 0; i < len; i++) {
            lis[i].onclick=(function(i){
                return function(){
                    alert(i)
                }
            })(i);
        };
    }
  </script>

 lis[i].onclick=(function(i){
                return function(){
                    alert(i)
                }
            })(i);

我上面这段代码没怎么看懂。。。为什么这样做之后，他就能按顺序弹出。
我被闭包弄得云里雾里啦。。求解答。谢啦

Answer 1

这里有这个for循环案例的详解：[JS 进阶] 闭包，作用域链，垃圾回收，内存泄露

实例2 ：给每个li添加点击事件

 var oli = document.getElementsByTagName('li');
 var i;
 for(i = 0;i < 5;i++){
     oli[i].onclick = function(){
         alert(i);
     }
 }
 console.log(i); // 5

 //执行匿名函数
 (function(){
    alert(i);  //5
 }());

上面是一个经典的例子，我们都知道执行结果是都弹出5，也知道可以用闭包解决这个问题，但是我刚开始始终不能明白为什么每次弹出都是5，为什么闭包可以解决这问题。后来捋一捋还是把它弄清晰了：

a. 先来分析没用闭包前的情况：for循环中,我们给每个li点击事件绑定了一个匿名函数，匿名函数中返回了变量i的值，当循环结束后，变量i的值变为5，此时我们再去点击每个li，也就是执行相应的匿名函数(看上面的代码)，这是变量i已经是5了，所以每个点击弹出5. 因为这里返回的每个匿名函数都是引用了同一个变量i，如果我们新建一个变量保存循环执行时当前的i的值，然后再让匿名函数应用这个变量，最后再返回这个匿名函数，这样就可以达到我们的目的了，这就是运用闭包来实现的！

b. 再来分析下运用闭包时的情况：

     var oli = document.getElementsByTagName('li');
     var i;
     for(i = 0;i < 5;i++){
         oli[i].onclick = (function(num){
             var a = num; // 为了说明问题
             return function(){
                 alert(a);
             }
         })(i)
     }
     console.log(i); // 5

这里for循环执行时，给点击事件绑定的匿名函数传递i后立即执行返回一个内部的匿名函数，因为参数是按值传递的，所以此时形参num保存的就是当前i的值,然后赋值给局部变量 a，然后这个内部的匿名函数一直保存着a的引用，也就是一直保存着当前i的值。 所以循环执行完毕后点击每个li，返回的匿名函数执行弹出各自保存的 a 的引用的值。

Answer 2

简单来说：利用闭包的特性把每一个i的值都存储在内存中。因为当点击时for循环已经结束，所以会弹出最后一个i的值。

详细可以看看:详解js闭包

Answer 3

因为用了闭包，所以在每次注册的时候，及时的将i传了进去

所以lis[i].onclick 注册了len个函数，分别是

function(){ 
    alert(0);
}

function(){
    alert(1);
}
...

function(){
    alert(len);
}

Answer 4

 lis[i].onclick=(function(i){
                return function(){
                    alert(i)
                }
            })(i);

1)

function(i){
      return function(){
         alert(i)
        }
    } 

定义一个匿名函数,假设设置A

2)

A(i);

匿名函数A立即执行 返回一个函数对象；
因为闭包的关系,返回的函数对象能够访问其所在的外层函数定义的变量；
所以这个返回函数执行时,弹出匿名函数传入的参数i

Answer 5

其实这里跟闭包的一个特性有关，会将每一个li的值保存在内存中，而不会清除，这样就可以挨个弹出了。
如果不使用闭包的话，会出现最后一个i的值

Answer 6

改写下逻辑，楼主应该就能看明白了

window.onload=function(){
    var lis=document.getElementsByTagName('li');
    var len=lis.length;
    for (var i = 0; i < len; i++) {
        lis[i].onclick=fn(i);
    };
}

function fn(i){
    return function(){
        alert(i)
    }
}

只不过原代码运用了匿名函数，举个匿名函数的例子，如jquery

(function( window, undefined ) {

})( window );

第一个window和第二个window是不同的，第二个window就是全局的window，第一个window只是一个函数的变量，只是这个函数没有名字，是实时执行的