クロージャを使用すると、JavaScript のループとクロージャの問題が解決されるのはなぜですか?

JavaScript の悪名高いループ問題がクロージャで解決されました

それぞれの ID を表示するための一意のアラート イベントを持つ 5 つのリンクを生成することを目的とした次のコードについて考えてみましょう。

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}

ただし、次のいずれかをクリックすると、このコードはその目的を達成できません。リンクには「リンク 5」が表示されます。これを解決するために、次の修正コードは各リンクに一意の ID を正常に割り当てます。

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function (num) {
            return function () {
                alert(num);
            };
        }(i);
        document.body.appendChild(link);
    }
}

クロージャー マジックについて

このコードの成功の鍵は、クロージャーの概念。 JavaScript では、クロージャは、クロージャが作成された関数の字句環境へのアクセスを保持する関数です。つまり、独自のスコープに関係なく、外部関数で定義された変数と引数にアクセスできます。

最初のコード スニペットでは、内部関数は変数 i を参照し、変数 i は先頭にホイストされています。関数のスコープ。ループが反復されると、変数 i が更新され、内部関数は常にその最新の値を参照します。これにより、クリックするとすべてのリンクに「リンク 5」が表示されます。

2 番目のコード スニペットでは、外側の関数リテラルが独自のスコープとローカル変数 num を持つ新しい関数オブジェクトを作成し、その値が現在の値に設定されます。 iの値。関数オブジェクトは、リンクの onclick イベントのイベント ハンドラーとして返されます。

重要なことに、内部関数は、変数 num を含む外部関数の字句環境のコンテキスト内で作成されます。したがって、内部関数は num へのアクセスを継続し、リンクがクリックされたときに正しい ID を通知する関数を返します。

このアプローチにより、各リンクが独自の一意のクロージャを持ち、i の正しい値が保持されます。ループが終了した後でも。

以上がクロージャを使用すると、JavaScript のループとクロージャの問題が解決されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。