for循环遍历LI问题

Posted 2020-09-02 武奘

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

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

  　　 lia[i].onclick = function(){ 
      　　alert(i);//此时打印的都是4  原因是闭包的问题  解析程序首先会在事件处理程序内部查找，这个匿名函数内部没有定义变量i，然后往上级查找，此时i为4 
   　　 };
   };
}

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

 

解决方法：

1、window.onload = function(){
　　　　var oUl = document.getElementById("ul1");
　　　　var aLi = oUl.getElementsByTagName(‘li‘);
　　　　for(var i=0;i<aLi.length;i++){
　　　　　　(function(e){
　　　　　　　　aLi[i].onclick = function(){
　　　　　　　　　　console.log(i);//全部打印4
　　　　　　　　}
　　　　　　})(i);
　　　　}

}

2、从匿名包装器中返回一个函数

　　window.onload = function(){
　　　　var oUl = document.getElementById("ul1");
　　　　var aLi = oUl.getElementsByTagName(‘li‘);
　　　　for(var i=0;i<aLi.length;i++){

　　　　　　aLi [i].onclick = (function(e){ 
           　　 return function(){
               　　 alert(e + 1);
            　　};
        　　 })(i);
　　　　}

  　　}