ループ関数で外部変数にアクセスするときにクロージャの問題を回避するにはどうすればよいですか?

ループ クロージャ内の外部変数へのアクセス

JavaScript で、ループ内からクロージャの外側の変数にアクセスすると、次の問題が発生する可能性があります。変数の最後の値が一貫して返されます。これは、ループの反復ごとに変数が変更され、クロージャがその最終値をキャプチャするために発生します。

これを解決するには、クロージャ手法を使用してループ内で変数のスコープを設定できます。次のクロージャは、変数をスコープとする別の関数を返す関数を作成します。

<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 (item) {
            return function () {
                alert(item.id);
                self.switchto(item.id);
            };
        })(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>

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