JavaScript はクロージャーによって引き起こされる問題を回避する_JavaScript のヒント

1 つ目

2 つ目

3 つ目

4 つ目

どの div をクリックしても、4 番目の div の内容がフィードバックされます。その理由は、各 div のクリック イベントがテスト メソッドでクロージャを形成し、各 div のクリック イベントが同じクロージャ スコープ チェーンを共有するためです。イベントがトリガーされると、変数 i で表される添字はすでに 4 番目の div を指しています。クロージャによって引き起こされる問題を回避するには、いくつかの方法があります。
(1) これを使用して、クロージャのスコープ チェーン コンテキストを変換します。上記の例のクロージャは、次のように書き換えることができます。 for (var i = 0; i {
var div = els[i];
div.onclick = function()
{
alert(this.innerHTML);
return false;
div をクリックするイベントがトリガーされたとき、検索範囲はすでに "this" で指定されたコンテキストになります。イベントは依然として「test」クロージャ内にありますが、クロージャのコンテキストにはアクセスまたは使用されないため、クロージャ スコープ内の変数が参照されることによって引き起こされる問題はありません。
(2) div をクリックするイベントを for ループでクロージャにし、for ループ内の変数 div が再利用されないようにします。例:
// for ループでクロージャ メソッドを定義します。
for (var i = 0; i { var div = els[i]; a(div);
関数 a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
}
// for ループの外側でクロージャ メソッドを定義します
for (var i = 0; i {
var div = a(div);
} 関数 a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
//匿名メソッドを使用します。原理は for ループの定義と似ています。
for (var i = 0; i {
var div = els [i];
(function(o)
{
o.onclick = function() {
alert(o.innerHTML);
}
} )( div);
}
中間メソッド a または匿名メソッドを使用して、for ループ本体と onclick イベントの間にクロージャを作成します。
(3) divをクリックしたイベントに必要な変数が外側のスコープと無関係になるように変数のスコープを制御します。例:
for (var i = 0; i {
(function()
{
var div = els[i];
div .onclick = function() {
alert(div.innerHTML);
}
})();
}
内部関数自体にも内部関数がある場合があります。スコープ チェーンがネストされるたびに、内部関数オブジェクトを作成した実行環境によって、新しいアクティブ オブジェクトが追加されます。 ECMA262 仕様では、スコープ チェーンが一時的なものであることが要求されていますが、スコープ チェーンの長さに制限はありません。クロージャの暗黙のルールは、Function と内部定義された Function の間の相互作用ドメイン チェーン コンテキスト環境の間の関係です。正しく使用すると、ネストされた内部関数の可能性は私たちの想像を超えます。