ループ内のクロージャとローカル変数

Question

私はJSの初心者です。クロージャについては読んでいました。クロージャの仕組みを誤解したり、「ループ内のハンドラを設定する」のがよくある例でした。また、これを回避する方法、つまりループ変数を引数として渡して関数を返す別の関数を呼び出す方法を見て理解しました。次に、これを回避する他の方法があるかどうかを知るためにディップを試み、次のコードを作成しました。

var i; 

var inpArr = new Array(); 

for(i = 0; i < 10; ++i) { 
    inpArr.push(document.createElement("input")); 
    inpArr[i].setAttribute("value", i); 
    inpArr[i].onclick = function() { 
    var index = i; 
    alert("You clicked " + index); 
    } 
    document.body.appendChild(inpArr[i]); 
} 

私は推測してもうまくいかず、なぜ分かりませんか。 iがキャプチャされ、生成されたすべての関数式で使用できることが分かりました。しかし、キャプチャされた変数をローカル変数indexに割り当てた後に、これがまだ機能しないのはなぜですか？ iに、別の関数の引数としてiを渡すのと同じものを割り当てていませんか？私は、iプリミティブではないとコピーされるはずはないという意味ですか？

私は混乱しています。誰かがここで何が起こっているか教えていただけたら、本当にありがとうと思います。

Answer 1

var index = i;がループの繰り返しごとに実行されていることを期待していると思いますが、異なるindexの変数に異なる値を設定すると、何も起こりません。各反復中に関数だけがハンドラに割り当てられ、関数は実行されません。

この文がクリックされたときに実行されるのは、その時点では、iの値が既にループごとに最大値になっています。この正確な問題は、読んだ解決策によって解決されます。

inpArr[0].onclick = <a function>; //(local)index=undefined; i=0; 
inpArr[1].onclick = <a function>; //(local)index=undefined; i=1; 
inpArr[2].onclick = <a function>; //(local)index=undefined; i=2; 
inpArr[3].onclick = <a function>; //(local)index=undefined; i=3; 
. 
. 
inpArr[9].onclick = <a function>; //(local)index=undefined; i=9; 

、あなたがクリックしたときにindex` `の

index = i; //i=9; (local)index=9;