イベント ハンドラーが動的に作成された要素の最後のループ反復からの値を受け取るのはなぜですか?

イベント ハンドラーとクロージャの変数参照

このシナリオでは、ループ内でイベント ハンドラーを使用して要素を動的に作成します。当初の目的は、ループの反復に基づいて個別の値をイベント ハンドラーに渡すことです。ただし、イベント ハンドラーは最後のループ反復からの値を受信して​​いるようで、スコープの問題を示唆しています。

実際、このコードの問題点は、ループ内でイベント ハンドラーとして匿名関数を使用していることにあります。ご想像のとおり、イベント ハンドラー関数はループ内の変数を参照するクロージャです。イベントが発生するまでにループは完了し、参照された変数には最後の反復で割り当てられた最終値が保持されます。

クロージャの実装

これを解決するにはを発行し、意図した値をイベント ハンドラーに適切に渡すには、ループの実行時に変数をキャプチャするクロージャを実装する必要があります。そうすることで、各イベント ハンドラーは、必要な特定の値への独自の参照を持つようになります。

次の改訂されたコードでは、イベント ハンドラー関数を、すぐに呼び出す別の匿名関数内にラップすることでクロージャを組み込んでいます ( IIFE (即時に呼び出される関数式):

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

この変更されたコードでは、内部 IIFE は、渡される必要なパラメーター (select、callid、otherid) を受け取りながら、実際のイベント ハンドラー関数を返します。ループから。ループの実行時にこれらの値をキャプチャすることで、各イベント ハンドラーに別個のスコープを効果的に作成できます。

この手法により、各イベント ハンドラーがイベントの発生時に必要な値への独自の参照を持つようになり、問題が解決されます。不適切な値参照の問題。

以上がイベント ハンドラーが動的に作成された要素の最後のループ反復からの値を受け取るのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。