試圖瞭解JS

選項1閉合問題：試圖瞭解JS

function addLinks() { 
    for (var i=0, link; i<5; i++) { 
     link = document.createElement("a"); 
     link.innerHTML = "Link " + i; 
     link.onclick = function() { 
      alert(i); 
     }; 
     document.body.appendChild(link); 
    } 
} 
window.onload = addLinks;

選項2：

function addLinks() { 
    for (var i=0, link; i<5; i++) { 
     link = document.createElement("a"); 
     link.innerHTML = "Link " + i; 
     link.onclick = function (num) { 
      return function() { 
       alert(num); 
      }; 
     }(i); 
     document.body.appendChild(link); 
    } 
} 
window.onload = addLinks;

我知道選項1：將輸出5每當你點擊，因爲封閉的，但選擇2將輸出正確的結果，0,1,2 ...

我的問題是：如何選項2解決問題？選項2如何工作？

來源

2013-07-03 user2294256

你可能想看看這個[SO問題]（http://stackoverflow.com/questions/111102/how-do-javascript-closures-work）。它有很多有用的答覆，可以幫助您瞭解關閉工作的方式。 – excentris

這可能對你有幫助 http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 –

選項1中的變量i位於函數addLinks()的範圍內（因爲它在該函數中聲明爲var）。它只被調用一次，只有一個作用域被分配給onclick的全部五個函數共享。

在選項2中，變量num位於匿名函數的範圍內（因爲它是該函數的形式參數）。它被稱爲五次;有五個獨立的作用域，分配給onclick的五個函數中的每一個都有一個。

這有幫助嗎？

來源

2013-07-03 06:13:32 Malvolio

+1會寫同樣的。事實上，在＃1中，創建了5個閉包，都指向相同的變量。在＃2中，創建了10個閉包，其中5代表i，但立即被評估（即時函數）。 5個內部關閉是指5個新創建的具有5個不同值的變量。 – chiccodoro

試圖瞭解JS

回答

相關問題