如何在 JavaScript 閉環循環中存取外部變數？

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

在JavaScript 中，當使用for 循環迭代數組時，很常見循環內變數的值始終與上次迭代相同的問題。這是由於可變作用域和閉包造成的。

為了解決這個問題，可以採用一種稱為閉包的技術。閉包是一個傳回函數的函數，它捕捉父函數的變數範圍。

考慮以下範例：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

在這段程式碼中，變數項隨著每次變化而變化。循環的迭代。當呼叫點擊處理程序時，它使用 item 的最後一個值。

為了解決這個問題，我們可以使用閉包來捕獲循環變數的範圍：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(
        // create an anonymous function that will scope "item"
        (function(item) {
            // that returns our function
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item) // immediately call it with "item"
    );
}</code>

這裡，我們將點擊處理函數包裝在另一個函數中，該函數在循環迭代期間捕捉item 的範圍。當呼叫點擊處理程序時，它會使用正確的 item 值。

另一種方法是使用 jQuery 的 $.each() 函數，該函數會自動取得循環變量，因此無需閉包：

<code class="javascript">$.each(this.items, function(i, item) {
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

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