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 の正しい値が使用されます。

別のアプローチは、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 中国語 Web サイトの他の関連記事を参照してください。