JavaScript クロージャでループする場合、一意の変数値へのアクセスを維持するにはどうすればよいですか?

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

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"
            );
    }

この中でコードを変更すると、項目の現在の値を引数として受け取る匿名関数がループの各反復内で作成されます。これにより、各クリック ハンドラーが item 変数の独自のインスタンスを持つことが保証されます。

または、jQuery の $.each() ヘルパー関数を使用してコードを簡素化し、クロージャの必要性を排除することもできます。

$.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);
  });
});

クロージャまたは jQuery の $.each() を使用すると、ループの各反復が変数の独自の一意の値にアクセスできるようになり、ループ外の外部変数にアクセスする問題を解決できます。

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