JavaScript クロージャからループ内の外部変数にアクセスするにはどうすればよいですか?

JavaScript クロージャからループ内の外部変数にアクセスする

問題は、ループ内で宣言された変数にアクセスするとき、特にそのような変数が後で参照されるときに発生します。非同期コールバック内。例として、次のコード スニペットを考えてみましょう:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
}</code>

この例では、item 変数はループの反復ごとに変化します。 item が後で参照されると、配列内の最後の 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>

代替: jQuery の $.each() ヘルパー

jQuery が使用可能な場合、 $.each() ヘルパーは、単純な for/each ループの短縮形として使用できます。関数呼び出しでのスコープ指定の仕組みにより、クロージャの必要性が軽減されます:

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

以上がJavaScript クロージャからループ内の外部変数にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。