for循環遍歷LI問題

<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);
　　　　}

  　　}