透過閉包解決JavaScript 臭名昭著的循環問題
考慮以下程式碼,旨在產生五個具有唯一警報事件的連結以顯示其各自的ID:
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); } }
但是,此程式碼未能實現其目的,因為點擊任何連結顯示「連結5」。為了解決這個問題,以下修改後的程式碼成功地為每個連結分配了唯一的ID:
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); } }
理解閉包魔法
此程式碼成功的關鍵在於閉包的概念。在 JavaScript 中,閉包是一個保留對創建它的函數的詞法環境的存取的函數。換句話說,它可以存取外部函數中定義的變數和參數,而不管其自身的作用域如何。
在第一個程式碼片段中,內部函數引用了變數 i,該變數被提升到了函數的範圍。當迴圈迭代時,變數 i 會更新,內部函數始終會引用其最新值。這會導致所有連結在單擊時顯示“連結 5”。
在第二個程式碼片段中,外部函數文字會建立一個新函數對象,該物件具有自己的作用域和局部變數 num,其值設定為目前值i 的值。函數物件作為連結 onclick 事件的事件處理程序傳回。
至關重要的是,內部函數是在外部函數的詞法環境的上下文中創建的,其中包括變數 num。因此,內部函數繼續訪問 num 並返回一個函數,該函數在單擊連結時提醒正確的 ID。
這種方法確保每個連結都有自己唯一的閉包,從而保留 i 的正確值即使循環終止後也是如此。
以上是為什麼使用閉包可以解決 JavaScript 的循環和閉包問題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!