Javascript關閉與循環

Question

我做了一些研究後放棄了這一點。我的問題如下：

從post，我瞭解以下代碼。

var funcs = {}; 
for (var i = 0; i < 3; i++) {   // let's create 3 functions 
funcs[i] = function() {   // and store them in funcs 
    var item = "item" + i;   // inside 
    console.log("item: " + item + ", i: " + i); // each should log its value. 
    }; 
} 
for (var j = 0; j < 3; j++) { 
    funcs[j]();      // and now let's run each one to see 
} 

Result: 
item: item3, i: 3 
item: item3, i: 3 
item: item3, i: 3 

但如果我更改移動var item = "item" + i之外的功能（），結果會有所不同。爲什麼是這樣？

var funcs = {}; 
for (var i = 0; i < 3; i++) {   // let's create 3 functions 
    var item = "item" + i;    // outside 
    funcs[i] = function() {   // and store them in funcs 
     console.log("item: " + item + ", i: " + i); // each should log its value. 
    }; 
} 
for (var j = 0; j < 3; j++) { 
    funcs[j]();      // and now let's run each one to see 
} 

Result: 
item: item2, i: 3 
item: item2, i: 3 
item: item2, i: 3 

Answer 1

你面臨的關鍵問題是一個閉包通過引用而不是按值來捕獲變量。例如：

var i = 0; 
var f = function(){ i++; console.log(i); } 
var g = function(){ i++; console.log(i); } 
f(); g(); f(); g(); 

這將顯示1，2，3，4，因爲fg和不捕獲變量i的值，但變量本身，因此都突變相同的變量。

一個非常常見的錯誤是創建在一個循環中的多個閉合忘記他們都將捕獲相同的變量（在循環中使用的一個），因此，當這個環路變量被遞增所有已創建的封閉件將看到它的變化。例如，在你的代碼

for (var i = 0; i < 3; i++) { 
    funcs[i] = function() { 
     var item = "item" + i; // inside 
     console.log("item: " + item + ", i: " + i); 
    }; 
} 

item是一個局部變量的函數，但i，而不是來自於外界，它的所有的人共享。由此可以看出，例如與

i = 42; 
funcs[0](); funcs[1](); funcs[2](); // Displays 42 three times 
i = 99; 
funcs[0](); funcs[1](); funcs[2](); // Now they all display 99 

在你的問題的東西第二種情況下都只是略有不同，因爲在

for (var i = 0; i < 3; i++) { 
    var item = "item" + i; 
    funcs[i] = function() { 
     console.log("item: " + item + ", i: " + i); 
    }; 
} 

也item變量現在共享，因爲它的定義功能外並關閉它捕獲它。在顯示屏中，您可以看到分配給它的最後一個值。

關鍵的一點是要記住，在Javascript中的變量是本地的功能，不是本地的{...}塊（像它在C++例如），並因此鑑別因素是，如果變量的函數內聲明或者在函數之外，如果它們是在循環內部或外部聲明的話。

爲了克服這個共同的問題，併爲每個中的迴路形成的封閉的單獨的索引你經常會看到這樣

var f = (function(i){return function(){ ... };})(i); 

其中創建函數，立即調用返回另一個函數的代碼。

的原因是創建一個單獨的新變量的唯一方法是一個功能，留給我們創建一個返回函數的函數的模式：在這種情況下有用的閉合（內）將捕獲每個迭代的變量都不相同（因爲它是外部參數）。

改變你的代碼

for (var i = 0; i < 3; i++) { 
    funcs[i] = (function(i){return function() { 
     var item = "item" + i; 
     console.log("item: " + item + ", i: " + i); 
    };})(i); 
} 

可以發揮預期的（即每個函數現在有自己的i值）。

Answer 2

在item變量不存在，直到函數的第一種情況下運行時，在該點它是本地的每個功能和獲取設置等於"item" + i。而i是3，因爲它在外部範圍內聲明，3是循環結束時的情況。

在第二種情況下，item變量存在於功能包含範圍 - 的相同的範圍內i - 和所述第一循環的最後迭代期間已被設定到"item2"。在該循環中，i的值爲0,1,2 - 循環結束時僅設置爲3。