这两段代码运行效率谁更高,还是说只是编码习惯的问题

Question

第一段：

for(var i=0;i<boxes.length;i++){
    boxes[i].index=i+1;
    boxes[i].onclick=function(){
        alert(this.index)
        }
}

第二段：

for(var i=0;i<boxes.length;i++){
     (function(i){
                 boxes[i].onclick=function(){
                         alert(i+1);
                     }                    
                 })(i);    
}


只看这两段代码，第二段自执行匿名函数的效率比较低吗？

Answer 1

第一段代码，当boxes[i].index = i + 1的时候就已经把当时的值赋给index了，不会出现永远输出boxes.length的情况。

原答案有问题，Sorry，没有做好研究就回答：
一起学习内存泄漏

Answer 2

首先可以肯定的是两种写法都是可以达到同一种效果的。或者说最起码在视觉效果上是相同的。
上边的弹出的是boxes[i]的一个属性index的值。这个弹出值来自于boxes[i]；
下边的弹出的是for循环中每个i+1后的值。这个值来自于for循环；

效率问题。。。。还真不好比较 在boxes.length不巨大的情况下两者的效率其实是非常接近的。至少我测试时两者的运行时间是十分接近的。这就要看浏览器的编译速度和计算机的计算速度了。
上边的代码每次for循环要为boxes[i]在内存中开辟一些空间来储存index的值
下边的代买采用闭包把每次的循环的i储存下来作为参数传给匿名函数。虽然省去了开辟空间的时间，但是匿名函数执行需要时间。所以这个比较有点困难

Answer 3

就理论而言，闭包消耗的资源更多一点，具体的应用就要看实际情况了

Answer 4

没有可比性，因为第二段是正确写法，第一段不会达到你期望的效果。

Answer 5

两种都达到想要的效果，如果第一段没有 boxes[i].index=i+1;赋值到index，直接输入i的话就无法达到效果

通常一看到这种代码，第一反应就是闭包，就是第二种方法。

第一种也能达到预期的，可以自己跑一下。

html:

<ul>
  <li class="myLi">1</li>
  <li class="myLi">2</li>
  <li class="myLi">3</li>
</ul>

javascript:

for(var i=0;i<document.getElementsByClassName("myLi").length;i++){
    document.getElementsByClassName("myLi")[i].index=i+1;
    document.getElementsByClassName("myLi")[i].onclick=function(){
        alert(this.index)
        }
}

Answer 6

如楼上所说，没有可比性，第一段代码，无论你按哪一个，永远输出为boxes.length