js_javascript スキルのクロージャに関する簡単な説明

まず、コードの一部を見てみましょう:

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

111
222
333
var a=document.getElementsByTagName("a");
関数 b(){
for(var i=0;i a[i].onclick=function(){
アラート(i);
}
}
}

デザインの本来の意図によれば、a タグをクリックすると、それに応じてタグのシリアル番号がポップアップ表示されます。つまり、最初の a をクリックすると 0 が表示され、2 番目の a をクリックすると 1 が表示されます。 ... しかし、実際には常に a のタグが表示されます。その理由は何でしょうか。私はこの問題に長い間悩まされてきましたが、多くの学生がこの問題についての理由を理解していないと思います。不適切な点がございましたら、ご批判、修正をお願いいたします。

私の個人的な理解では、上記の関数が目的を達成できない理由は、イベント処理関数が変数 i にバインドされており、イベント処理関数が onclick に代入されているため、イベント処理関数は次の場合にのみ起動されることになります。 a タグがクリックされるとこの関数が呼び出されるため、論理的に言えば、単純な for ループ内の function(){alert(i);} は実際には実行されず、a ラベルをクリックした時点で for ループはすでに実行されています。実行完了後、このときの i の値が for ループの最終値となります。簡単に理解すると、i の値は b 関数に属し、必要な i の値はリアルタイムでイベント処理関数に渡される値であるということです。では、当初の設計意図を達成する方法はあるのでしょうか?賢い学生なら、クロージャを使用するためだと推測したかもしれません。

別のコードを見てみましょう:

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

var a=document.getElementsByTagName("a");
関数 b(){
for(var i=0;i a[i].onclick=function(j){
return function(){
アラート(j);
}
}(i);
}
}
b();

上記のコードを実行すると、必要な機能が実装されていることがわかります。つまり、任意のラベルをクリックすると、ラベルが配置されているシリアル番号がポップアップ表示されます。上記のコードについては、多くの学生が同様のバージョンを見たことがあると思いますが、なぜこれを実行することで必要な機能を実現できるのでしょうか? これは単なる個人的な意見です。何か間違っている場合は、お気軽にご指摘ください。

上記のコードの理解の本質は、変数 i の理解です。このコードでは、関数が for ループまで実行され、すぐに呼び出される関数を見つけます。このとき、リアルタイムの i 変数の値がすぐに呼び出される関数に渡され、イベント処理関数も格納されます。リアルタイムの i 変数値。

上記がこの記事の全内容です。皆さんが JS クロージャを理解するのに役立つことを願っています。