まず、コードを見てみましょう。
コードコピーは次のとおりです。
<a href = "javascript:void(0);"> 111 </a>
<a href = "javascript:void(0);"> 222 </a>
<a href = "javacsript:void(0);"> 333 </a>
var a = document.getElementsByTagname( "a");
関数b(){
for(var i = 0; i <a.length; i ++){
a [i] .onclick = function(){
アラート(i);
}
}
}
デザインの当初の意図によれば、タグAをクリックして、対応するシリアル番号のタグをポップアップすること、つまり、最初のAをクリックして0ポップアップして1ポップアップすることです。理由は何ですか?この問題は長い間私を悩ませてきました。私は多くのオンライン資料とリファレンスブックに相談しました。それらのほとんどはもっともらしいです。多くの学生はその理由についてあまり知らないと思います。この問題についての私の理解について話します。不適切なものがある場合は、私を批判し、修正してください。
私の個人的な理解では、上記の関数がその目的を達成できなかった理由は、イベント処理関数が変数Iに結合し、イベント処理関数がOnClickに割り当てられることです。つまり、機能はAタグがクリックされたときにのみ呼び出されます。したがって、論理的に言えば、function(){alert(i);} for Loopの単純なものは実際には実行されず、Aタグをクリックすると、forループは既に実行されています。この時点で、Iの値は、forループ実行の最終的な値です。簡単にするために、Iの値はB関数に属し、私が必要とする値は、イベント処理機能にリアルタイムで渡される値です。それで、私たちの元の設計意図を実現する方法はありますか?賢いクラスメートは、閉鎖を使用することであると推測したかもしれません。
別のコードを見てみましょう:
コードコピーは次のとおりです。
var a = document.getElementsByTagname( "a");
関数b(){
for(var i = 0; i <a.length; i ++){
a [i] .onclick = function(j){
return function(){
アラート(j);
}
}(私);
}
}
b();
上記のコードを実行すると、必要な関数が実装されていることがわかります。つまり、タグAをクリックすると、タグが配置されているシリアル番号がポップアップ表示されます。多くの学生が上記のコードの多くの類似バージョンを見たと思いますが、なぜこれを行うことで必要な機能を達成できるのでしょうか?これは私の個人的な意見です。不適切なものがある場合は、アドバイスをください。
上記のコードの理解の本質は、変数iの理解です。このコードでは、関数が実行され、forループが見つかると、即時の呼び出し関数が見つかります。現時点では、リアルタイムI変数値は即時の呼び出し関数に渡されます。関数はすぐに呼び出され、イベント処理機能はリアルタイムIの変動値を保存します。
上記はこの記事に関するすべてです。 JSの閉鎖についての皆さんの理解に役立つことを願っています。