JavaScript クロージャと jQuery を使用してループ内で外部変数に正しくアクセスする方法

JavaScript クロージャを介したループ内の外部変数へのアクセス

JavaScript では、クロージャやループ内で変数を操作すると課題が発生する可能性があります。この記事では、ループ内の変数にアクセスすると、変数のスコープが原因で予期しない値が発生するという一般的な問題について説明します。

次のコード スニペットを検討してください。

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

によって作成されたボタンのいずれかをクリックしたときループの場合、alert 関数は常に配列内の最後の項目の ID を表示します。これは、反復ごとに変数項目が変化し、クリック イベントがトリガーされるまでに最後の要素を参照するために発生します。

この問題を解決するには、クロージャを利用できます。クロージャは他の関数を返す関数であり、変数のローカライズされたスコープを作成するためによく使用されます。コードを変更することで、変数項目をクロージャ内にカプセル化できます。

<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() ヘルパー関数を利用することもできます。これにより、反復と変数のスコープ設定プロセスが簡素化されます。 :

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

この場合、項目はパラメーターとして関数に渡され、適切なスコープが確保され、最初の問題が解決されます。

以上がJavaScript クロージャと jQuery を使用してループ内で外部変数に正しくアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。