【JavaScript】Closure in for loop

我們通常會遇到以下情況

假設有個簡單網頁，所包含的元件如下

<ul>
    <li>123</li>
    <li>456</li>
</ul>

我們要給每個 li 加上一個 onclick 事件

滑鼠點擊後會 alert 順序的編號

為了讓程式聰明點

我們通常會使用 getElementsByTagName

和 foor loop 來 add event

例如:


var list = document.getElementsByTagName("li");
for( var i=0; i<list.length; i++){
list[i].onclick = function(){
alert(i);
}
}

但是這樣會發現一個嚴重的問題

每個 li alert的數字都一樣是2

為什麼?

因為當滑鼠按下時，做的動作是: alert(i);

而當時的 i 早就跑完迴圈變成 2 了

所以應該要這樣寫:


var list = document.getElementsByTagName("li");
for( var i=0; i<list.length; i++){
list[i].onclick = (function(index){
return function(){
alert(index);
}
})(i);
}

把重要的那部分拿出來研究一下:


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

最外面的 ()(i) 的意思是執行裡面的 anonymous function

而裡面的 anonymous function 又 return 一個 function

return 的 function 做的事情是 alert(index)

index 又是  anonymous function 的 parameter

就是一個不被外部干擾的 Local variable

所以可以保證 alert 是我們想要的數字