js闭包自解

首先来看一段代码：

<script type="text/javascript">
function xc(){
  var ul1 = document.getElementById('ul1').getElementsByTagName('li');
 for(var i=0;i<ul1.length;i++){
   ul1[i].onclick=function(){
    alert(i);
   }
  }
}
window.onload = xc;
</script>
<ul id="ul1">
  <li>111</li>
  <li>22</li>
  <li>33</li>
</ul>

这是一个初学者写的代码，打印 i 我们得到每次循环后的索引值 3 大部分人会很惊讶的问，这是为什么呢？

原因是js初学者并没有理解闭包的特征，通过element.click=function(){}添加的click事件打印的 i 并非是每次循环是对应的0、1、2.。。。，而是循环后得到的最大值。或者说循环时响应函数内并未能保存对应的值 i，而是最后一次i++的值5。

针对以上状况，得到以下解决代码：

1、

<script type="text/javascript">
function xc(){
  var ul1 = document.getElementById('ul1').getElementsByTagName('li');
 for(var i=0;i<ul1.length;i++){
   ul1[i].i = i;
   ul1[i].onclick=function(){
    alert(i);
   }
 }
}
window.onload = xc;
</script>

2、

<script type="text/javascript">
function xc(){
  var ul1 = document.getElementById('ul1').getElementsByTagName('li');
 for(var i=0;i<ul1.length;i++){
  (function (arg){
   ul1[i].onclick=function(){
    alert(arg);
   }
  })(i);
 }
}
window.onload = xc;
</script>