JavaScript 常見錯誤六：在for循環(huán)中的不正確函數(shù)調(diào)用

請大家看以下代碼：

var elements = document.getElementsByTagName('input');

var n = elements.length; 

for (var i = 0; i < n; i++) {     

elements[i].onclick = function() {         

console.log("This is element #" + i);     }; } 

運行以上代碼，如果頁面上有10個按鈕的話，點擊每一個按鈕都會彈出 “This is element #10”! 。這和我們原先預(yù)期的并不一樣。這是因為當點擊事件被觸發(fā)的時候，for循環(huán)早已執(zhí)行完畢，i的值也已經(jīng)從0變成了。

我們可以通過下面這段代碼來實現(xiàn)真正正確的效果：

var elements = document.getElementsByTagName('input'); 

var n = elements.length; 

var makeHandler = function(num) {  // outer function

      return function() { 

console.log("This is element #" + num);      }; }; 

for (var i = 0; i < n; i++) 

{     elements[i].onclick = makeHandler(i+1); }

在這個版本的代碼中， makeHandler 在每回循環(huán)的時候都會被立即執(zhí)行，把i＋1傳遞給變量num。外面的函數(shù)返回里面的函數(shù)，而點擊事件函數(shù)便被設(shè)置為里面的函數(shù)。這樣每個觸發(fā)函數(shù)就都能夠是用正確的i值了。