如何使用 JavaScript 閉包和 jQuery 在循環中正確存取外部變數？

透過JavaScript 閉包存取循環中的外部變數

在JavaScript 中，在閉包和循環中操作變數可能會帶來挑戰。本文解決了一個常見問題，即在迴圈中存取變數會因變數作用域而導致意外值。

考慮以下程式碼片段：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

按一下由在循環中，警報函數總是顯示陣列中最後一項的 ID。發生這種情況是因為變數 item 隨著每次迭代而變化，並且當點擊事件被觸發時，它引用了最後一個元素。

為了解決這個問題，我們可以使用閉包。閉包是傳回其他函數的函數，通常用於建立變數的本地化作用域。透過修改程式碼，我們可以將變數 item 封裝在閉包中：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(
        (function(item) {
             return function() {
                alert(item.id);
                self.switchto(item.id);
             };
        })(item)
    );
}</code>

在內部函數中，變數 item 被捕獲為參數，從而有效地創建了本地化範圍。這確保了當點擊事件被觸發時，它將存取與該按鈕關聯的正確的項目物件。

或者，您可以利用jQuery 的$.each() 輔助函數，這簡化了迭代和變數作用域過程:

<code class="javascript">$.each(this.items,function(i, item) {
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

在這種情況下，item 作為參數傳遞給函數，確保適當的範圍並解決初始問題。

以上是如何使用 JavaScript 閉包和 jQuery 在循環中正確存取外部變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！