循環中的閉包如何處理變數共享並保持唯一性？

揭穿循環中閉包的誤解

在程式設計領域，閉包因其能夠在範圍內維護對變數的引用而引起了極大的關註一個循環。然而，理解這個概念可能會令人畏懼。讓我們使用簡化的程式碼範例進行詳細解釋，讓您有一個全面的理解。

考慮以下程式碼片段：

<code class="javascript">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;</code>

出現的問題是如何壓縮這段程式碼同時保留了閉包的本質。為了解決這個問題，我們將採用「函數工廠」方法。

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = (function (x) {
        return function () {
            alert(x);
        }
    })(i);
}</code>

或者，為了提高可讀性：

<code class="javascript">function generateMyHandler(x) {
    return function () {
        alert(x);
    }
}

for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = generateMyHandler(i);
}</code>

揭示閉包的作用：

需要理解的一個重要方面是閉包的獨特性質。它們不僅捕捉變數的值，還包含變數本身。為了說明這一點，請考慮以下程式碼：

<code class="javascript">var message = 'Hello!';
document.getElementById('foo').onclick = function () { alert(message) };
message = 'Goodbye!';</code>

點擊元素「foo」將觸發一個警報框，顯示訊息：「再見！」。這是因為閉包保留變量，而不僅僅是它的值。

在循環的上下文中，使用簡單的閉包會導致變數共享。以下程式碼示範了這一點：

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById('something' + i).onclick = function () { alert(i) };
}</code>

當點擊任何元素時，都會提示數字 10 的警報，因為所有函數共享相同的變數。甚至修改 i，如 i = "hello"; 所示將導致所有元素顯示相同的警報：「hello」。這是由於對變數的共享引用造成的。

函數參數的力量：

為了減輕這種變數共享，我們利用 JavaScript 中函數參數的功能。呼叫函數時，參數透過引用（對於物件）或值（對於字串和數字）傳遞。這使我們能夠打破閉包內變數的共享。

在修改後的程式碼片段中：

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick =
        (function (x) {
            return function () {
                alert(x);
            }
        })(i)
}</code>

我們引入了一個工廠函數來產生所需的函數參考。此引用捕獲傳遞給函數的參數（在本例中為 i 的值）並將其維護在閉包內，確保每個元素保留其唯一值。

以上是循環中的閉包如何處理變數共享並保持唯一性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！