すべてのクリック ハンドラーが「リンク 5」を返すのはなぜですか?

JavaScript の悪名高いループ問題: クロージャが魔法を明らかにする

悪名高いループ問題は、コード スニペットが次のようなリンクのコレクションを作成しようとすると発生します。独自のクリック ハンドラー。それでも、クリックするたびに「リンク 5」として登録され、当惑の呪文がかかります。

クロージャ: 謎の魔術師

謎は JavaScript のスコープ、つまり制限された領域にあります。ブロックではなく関数で。ベールに包まれた魔術師であるクロージャーは、囲い込むスコープを自らの掌中に閉じ込めます。

欠陥ループ

誤ったループでは、変数 'i' が関数内に閉じ込められます。閉鎖刑務所に収監されている。ループが完了すると、「i」は「5」に変化し、不運なハンドラーに幽霊のような痕跡を残します。

救世主ループ

から希望の光が現れます。 2番目のループ。各反復では、独立した関数オブジェクトが呼び出され、それぞれが独自のセンチネル 'num' を保護します。この痕跡は、突然変異を引き起こす時間の影響に抵抗し、ハンドラーを「5」の陰湿な呪文から守ります。

最適化された三位一体

閉鎖がこの奇跡的な変化を促進する一方、それはリンクごとに 2 つの新しい関数オブジェクトという、法外な価格が要求されます。より適切な解決策は、DOM の秘密の知識を利用することで生まれます。データをノードに直接保存することで、外部スコープの圧制から解放され、明確な記憶を持つリンクが呼び出されます。

秘薬エリクサー

真の魔法は以下にあります。コードのこの部分:

function linkListener() {
    alert(this.i);
}

function addLinks() {
    for(var i = 0; i < 5; ++i) {
        var link = document.createElement('a');
        link.appendChild(document.createTextNode('Link ' + i));
        link.i = i;
        link.onclick = linkListener;
        document.body.appendChild(link);
    }
}

各リンクには独自の「i,」が付いています。クリックの魅力の中にそのユニークなアイデンティティをささやきます。クロージャーの魔法は正確に行使され、驚異の呪文を唱え、リンクに自分の運命を呼び戻す力を与えます。

以上がすべてのクリック ハンドラーが「リンク 5」を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。