JavaScript の自動起動機能の問題に関するディスカッション_JavaScript スキル

あまり言うことはありません。

最初に 2 つのコードを見てみましょう:

コードをコピーします コードは次のとおりです:

var elems = document.getElementsByTagName('a');

for (var i = 0; i
alert( i);
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' i);
}, 'false');
}

もう一度見てください:

コードをコピーしますコードは次のとおりです:

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i ) {

(function(index ){
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('私は link # ' インデックス);
}, ' false');
})(i);


HTML コードは次のとおりです。 >

コードをコピー

コードは次のとおりです。 a a a

a

a
a
< a href = "#">a



前後の 2 つのスクリプト コードの影響を想像してください。

効果の違いがわかりましたら、おめでとうございます。少なくとも私は、その背後にある謎を理解するまでに長い間考えました。

はい。ここの最初のコードは、どのリンクをクリックしても、出力は「I am link # 8」です。

2 番目のコードは、本当に必要な結果であり、次に「Why」です。

以下のコードを見てください:




コードをコピーします


コードは次のとおりです:

var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i ) { alert(i);

elems[ i].addEventListener('click', function (e) {

e.preventDefault();
alert('I am link #' i);
//ここのコールバック関数は
のみをトリガーします。//同様に、ここでの i の値もループの最後で変更されます
}, 'false');

// 理由は
/ /ここの elems[i] は参照要素です
//しかし、コールバック関数の i はループ終了後に 8 に変更されています
//(elems の長さが 8 の場合)
}






コードをコピー

コードは次のとおりです:

var elems = document。 getElementsByTagName('a'); for (var i = 0; i < elems.length; i ) { (function(index){

elems[i]. addEventListener('click', function (e) {

e.preventDefault();
alert('私はリンク #' インデックスです);
}, 'false')( i);
//これは違います
//ループが終了すると i の値は 8 になります
//ただし、クロージャにカプセル化されたインデックスは実際にロックされます
//記憶の中で。
//正確には、関数全体をメモリ内でロックする必要があります。

}


ここでは、JavaScript クロージャについての知識が必要になる場合があります。

上記のコードを長い間考えて、忘れないように記録しました。