インライン関数でこの変数にアクセスするにはどうすればよいですか?

Question

ここが私のジレンマです。

コードのこのセクションがあります。

var list_of_numbers = new Array();

function AddToArray(func)
{
    // Add to the *beginning* of the array
    // essentially reversing the order

    list_of_numbers.unshift(func);
}

function DisplayNumber(num)
{
    document.write(num);
}

for(var i=0;i<5;++i)
{
   AddToArray(function() { DisplayNumber(i); });
}

for(var i=0;i<5;++i)
{
   list_of_numbers[i]();
}​

想定されているのは、5 つのインライン関数が配列に追加されることです。 ～のコピーを取る i. 。しかし、これは起こりません。

期待される出力:

43210

実際の出力:

01234

Answer 1

2 つの別々の問題があり、どちらもスコープに関連しています。

var list_of_numbers = new Array(); 
function AddToArray(func) 
{ 
    // Add to the *beginning* of the array
    // essentially reversing the order 
    list_of_numbers.unshift(func); 
} 

function DisplayNumber(num) 
{ 
    document.write(num); 
} 
for(var i=0;i<5;++i) 
{ 
    (function(i) 
     { 
         AddToArray(function(){ DisplayNumber(i); });
     })(i); 
} 

for(var j=0;j<5;++j) 
{ 
    list_of_numbers[j](); 
}​

1. 渡している匿名関数 AddToArray 変数にバインドされています i, 、現在の値ではありません。これに対処するために、新しい関数を作成し、現在の関数を渡します。 i.

2. JavaScriptには関数スコープがあるので、再宣言すると i 2 番目のループでは、同じ変数を変更しています。したがって、名前を次のように変更します j.

最初の 1 つだけが問題であれば、すべての関数が同じものを使用するため、55555 が返されます。 i, その時点で5．ただし、再利用するので、 i 2 番目のインデックスについては、 i 現在のループインデックスに設定されます。