JavaScriptのクロージャを理解する小さな例

Question

実際のシナリオからjavascriptクロージャを理解しようとしています。理論的にはわかっていますが、クロージャの内部関数は、内部関数関数。

私はstackOverflowでもいくつかの質問を読んでいます。

ここで何が起こっているのか分かりません。

var foo = []; 
for(var i=0;i<10;i++){ 
    foo[i] = function(){ 
    return i; 
} 
} 
console.log(foo[0]()); 

は、これは10の記事のほとんどは、時間によってそれがインナー無名関数、ループの結果であるループに存在する最後の値として実行なっているに達していると言って私を与えます10が印刷されています。

しかし、私はまだこれの底に到達することができません。逆に

私のようなものを使用した場合、：

var foo = []; 
for(var i=0;i<10;i++){ 
(function(){ 
    var y =i; 
    foo[i] = function(){ 
    return y; 
} 
})(); 
} 
console.log(foo[0]()); 

を私はoutput.Anyのヘルプは高く評価されるだろう取得しています。

Answer 1

は多分、このコードブロックは

var foo = []; 
for(var i = 0; i < 10; i++) { 
    foo[i] = function() { 
     return i; // is a reference and will always be the value, which 'i' have on function execution 
    } 
} 
// 'i' is 10 here! 
console.log(foo[0]()); // executing the function will return the current value of 'i' 

/////////////////////////////////////// 

var foo = []; 
for(var i=0;i<10;i++) { 
    /* thats a IIFE (immediately invoked function expression) */ 
    (function(a) { // 'a' is now a local variable 
     foo[a] = function() { // defines a function 
      return a; // is a reference to local variable 'a' 
     }; 
    })(i); // <- passing the current value of i as parameter to the invoked function 
} 
// 'i' is 10 here 
console.log(foo[0]()); // returns the reference to 'a' within the same scope, where the function was defined 

Answer 2

最初のシナリオでは、fooアレイに追加されたすべての関数は同じvar iを参照しています。すべての関数は、iが最後に設定されたもの、つまり10を返します。ループの最後の反復中に値が設定されているためです。第2のシナリオでは

、すぐにこの関数を呼び出している：

(function(){ 
    var y =i; 
    foo[i] = function(){ 
    return y; 
    } 
})(); 

すぐに効果的にループの反復ごとに、var yの局所状態でロックされ、それを呼び出すことによって - それはユニークな範囲を提供します配列に追加された各関数に対して