JavaScript ループでイベント ハンドラーを作成する場合、クロージャは共有参照を回避するのにどのように役立ちますか?

JavaScript でクロージャを使用したイベント ハンドラーを作成する

JavaScript プログラミングでは、ループ内にイベント ハンドラーを作成するのが一般的です。ただし、select.onchange = function() のような構文を使用する場合は、共有参照に関する潜在的な問題を認識することが重要です。

この構文を使用してループ内でイベント ハンドラーが割り当てられると、次のような問題が発生する可能性があります。同じ変数を指すすべてのイベント ハンドラーに送信されます。これには、ループ内で割り当てられた最終値が含まれます。これにより、個々の反復に関係なく、すべてのイベントのイベント ハンドラーに同じパラメータが渡される可能性があります。

この問題を解決し、共有変数の参照を防ぐには、クロージャが必要です。クロージャには、参照によって外部関数から変数を取得する内部関数の作成が含まれます。この内部関数はイベント ハンドラーとして使用でき、各イベント ハンドラーが対応するループ反復からの変数の独自のコピーを持つようになります。

質問内の指定された例について、以下のコードは、次の方法を示しています。クロージャーを実装し、正しいパラメーターをイベント ハンドラーに渡します。

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s,c,a) {
        return function() {
            onStatusChanged(s,c,a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}</code>

このコードでは、内部の匿名関数はイベント ハンドラーとして使用される関数を返します。関数内の (s,c,a) パラメーターは参照によってキャプチャされ、各イベント ハンドラーが独自の一意の変数セットを持つことが保証されます。その結果、イベントの発生時に正しいパラメーターが onStatusChanged メソッドに渡されます。

以上がJavaScript ループでイベント ハンドラーを作成する場合、クロージャは共有参照を回避するのにどのように役立ちますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。