javascript - 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);
}

应用的外部匿名函数返回一个闭包，该闭包正确地“双重绑定(bind)”到作为 num< 传入的 i 的当前值(num 实际上是绑定(bind)的自由变量)。请记住，函数会引入一个新的作用域——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 />");
}

这会产生“奇怪的结果”，因为它与绑定(bind)在每个闭包中的 i 相同(即 i 是免费的变量，只有一个 i)。因此，当执行该函数时，它将返回 i 在执行点的当前值。

快乐编码

---

我建议阅读 Jibbering JavaScript Closure Notes -- 它不是最适合初学者的资源，但我发现它很容易访问，并且解释得足够详细。 (而且比 ECMAScript 规范 IMOHO 的可读性要好得多)。