JavaScript クロージャパラメータの受け渡しとイベントループバインディングに関するディスカッション example_javascript スキル

今日、常識に従ってループ内のイベントをバインドする JavaScript の質問を見ましたが、結果は私が望んでいたものではありませんでした。

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

<script> '); <br>for ( var i = as.length; i--; ) { <br>as[i].onclick = function() { <br>return false; 🎜>} <br>} <br></script>


1. このコード内のリンクをクリックすると、ポップアップの i がすべて -1 になるのはなぜですか?

簡単に言うと、関数の変数のスコープの問題です。 function() { return false; が内部で定義されていません。 a() ですが、内部で使用されているため、for ループ内で定義されている i が見つかりました。実行後、i の値は - になりました。 1; ポップアップするたびに -1; 2 つのパラメータを持つ for ループも一般的ではありません。混乱？

for (文 1, 文 2, 文 3) {

//todo

}

a.for ループ条件

一般に、ステートメント 1、ステートメント 2、およびステートメント 3 はすべてオプションです。

b. ステートメント 2:

通常、ステートメント 2 は初期変数の条件を評価するために使用されます。

ステートメント 2 もオプションです。

ステートメント 2 が true を返した場合はループが再開され、false を返した場合はループが終了します。

ヒント: ステートメント 2 を省略する場合は、ループ内にブレークを指定する必要があります。そうしないとサイクルを停止できません。これによりブラウザがクラッシュする可能性があります。

c. i-- 判定について:

i--true/false を判定する場合、最初に i-- が判定され、次に i-- が計算されます。 i--の最後の判定に入る際、実際にi==0と判定された場合、判定後に再びi--が実行され、forループが終了したため、iの値は-1となりました。 var i = 1;

!!i--;//ture

解決策:




コードをコピー


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

var as = document.getElementsByTagName('a'); for ( var i = as.length; i--; ) { (function (i){ as[i].onclick = function() { alert(i); return false;

}

})(i)
}


または:




コードをコピー

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

var as = document.getElementsByTagName('a'); for ( var i = as.length; i--; ) { var a = function(i){ as[ i].onclick = function( ) { alert(i); return

}

}
a(i);


他のネチズンは 7 メソッドのデモで解決しました:




コードをコピー

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

< ;head> title>クロージャのデモ

製品 2

製品 4

🎜>< /body>



1. 各段落オブジェクトに変数 i を保存します (p) 🎜 >コードをコピー


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


function init() {
var pAry = document.getElementsByTagName("p"); >for( var i=0; ipAry[i].i = i;
pAry[i].onclick = function() {
alert(this. i);
}
}
}

2. 変数 i を匿名関数自体に保存します

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

function init2() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i(pAry) [i].onclick = function() {
alert(arguments.callee.i);
}).i = i
}
}

3 、クロージャの層を追加し、i は関数パラメータの形式で内部関数に渡されます

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

function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i(function( arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);// パラメータcall
}
}

4. クロージャーの層を追加し、ローカル変数

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

function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i(function () {
var temp = i; //呼び出し時のローカル変数
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}

5.応答イベントとして関数を返します (3 との微妙な違いに注意してください)

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

function init5() {
var pAry = document .getElementsByTagName("p");
for( var i=0; ipAry[ i].onclick = function(arg) {
return function() { //関数を返します
alert(arg)
}
}(i); }


6. Function を使って実際に実装します。 Function インスタンスが生成されるたびにクロージャーが生成されます

コードをコピー コードは次のとおりです。 function init6() {

var pAry = document.getElementsByTagName("p");

for( var i= 0; ipAry[i].onclick = new Function ("alert(" i ");");//new は関数インスタンスを一度に生成します
🎜>}


7. Function を使用して実装します。6 との違いに注意してください

コードをコピー

コードは次のとおりです。 function init7() { var pAry = document. getElementsByTagName("p")

for( var i=0; ipAry[i].onclick = Function('alert(' i ')')
}
}


概要が完了しました。ようこそ参加するために！