JavaScript の自動起動機能の問題に関するディスカッション_JavaScript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:20:41

オリジナル

1343 人が閲覧しました

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

最初に 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 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 クロージャについての知識が必要になる場合があります。 

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