為什麼使用閉包可以解決 JavaScript 的循環和閉包問題？

透過閉包解決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中文網其他相關文章！