Javascript中的閉包混淆

Question

范例1： http ： //jsfiddle.net/ufCr8/

function createFunctions() {
    var result = new Array();

    for (var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        }();
    }

    return result;
}

var funcs = createFunctions();       
for (var i = 0; i < funcs.length; i++) {
    document.write(funcs[i] + "<br />");
}

示例2： http ： //jsfiddle.net/T5shB/

function createFunctions() {
    var result = new Array();

    for (var i = 0; i < 10; i++) {
        result[i] = function(num) {
            return function() {
                return num;
            };
        }(i);
    }

    return result;
}

var funcs = createFunctions();
for (var i = 0; i < funcs.length; i++) {
    document.write(funcs[i]() + "<br />");
}

為什么這兩個得到不同的結果？

Answer 1

這些都正常工作。 （並具有相同的結果）。

樣本1：

for (var i = 0; i < 10; i++) {
    result[i] = function() {
        return i;
    }(); // note function application!
}

然后立即執行匿名函數，結果是循環中每次迭代的i的數字（ 當前 ）值。 這實際上與result[i] = i 。 不太令人興奮。 （在打印出該值的循環中，沒有函數應用程序，如果不是函數，則將作為數字出現錯誤-在這種情況下，它不同於下面的示例。）

樣本2：

for (var i = 0; i < 10; i++) {
    result[i] = function(num) {
        return function() {
            return num;
        };
    }(i);
}

應用的外部匿名函數返回一個閉包，該閉包正確地“雙綁定”到以num形式傳遞的i的當前值 （ num實際上是綁定的自由變量）。 請記住，函數引入了新的作用域var （或for ）沒有引入。

我懷疑“失敗的情況”是：

for (var i = 0; i < 10; i++) {
    result[i] = function() {
        return i;
    }; // note function NOT invoked here!
}

...
for (var i = 0; i < funcs.length; i++) {
    document.write(funcs[i]() + "<br />");
}

這將產生“奇數結果”，因為在每個閉包中綁定的i是相同的 （即i是自由變量，並且只有一個i ）。 因此，當函數執行時，它將在執行時返回i的當前值 。

快樂編碼

---

我建議閱讀《 Jibbering JavaScript Closure Notes》 （ Jibbering JavaScript Closure Notes） ，它不是最入門的資源，但是我發現它可訪問，並且可以詳細解釋事情。 （並且遠比ECMAScript規范IMOHO更易讀）。