javascript - ループ/クロージャ内のJavaScript関数

Question

私は JavaScript を初めて使用し、配列 myElements[] 内のさまざまな DOM 要素に一意の onclick ハンドラーを割り当てようとするこのコードの動作を理解しようとしています。

(function handleClicks(){
for (var i = 0; i < 100; ++i) {
myElements[i].onclick = function() {
        alert( 'You clicked on: ' + i );
};
})();

私の理解では、DOM要素がクリックされるたびに、関数が完了するとjavascriptが私が持っている値を使用するため、ブラウザーは「100をクリックしました」と警告する必要があります

2 つの質問があります。

var myElements = [];



myElements.push( document.getElementById('1');

myElements.push( document.getElementById('2');

しかし、プログラムが実行されると、クリックされた要素ごとに 'you clicked on: 2' というアラートが表示されます。

「あなたがクリックした場所: 100」というアラートが表示されないのはなぜですか。関数の実行が終了したら、これは確かに i の値なのでしょうか?

score 1 · Accepted Answer

「i関数内にのみスコープがある場合、関数が完了するhandleClicks()とブラウザーはどのようにアクセスできますか? もはや存在しませんか?」ii

変数は外側のiスコープ(handleClicks関数)内にあります。関数が作成されると、関数の存続期間中、元の変数スコープが保持されます。これは閉鎖と呼ばれます。

このため、ループで作成されたすべてのハンドラ関数は、にi存在する同じ変数を参照していhandleClicksます。これはi生き続けます。ハンドラーを破棄すると、iガベージコレクションが可能になります。

のプロパティにアクセスするとTypeError2が発生するため、2 番目のコード例はで停止します。これにより、コードの実行が停止します。undefined

score 0 · Accepted Answer

これは、myElements 配列に要素が 2 つしかないためです。そのため、ループは 2 までしか実行されず、その後はエラーが発生します。要素を 5 つ追加すると 5 が表示され、100 を追加すると 100 が表示されます。

2 に答える 2