javascript - 从匿名包装器返回一个函数？

Question

我正在尝试理解代码

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}

从这里http://bonsaiden.github.com/JavaScript-Garden/#function.closures

我理解这个方法:

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

谁能帮我解释一下第一个？

我将尝试解释我是如何理解第一个的，

first i is 0,
setTimeout is called,
self calling function "function(e)" is called with i=0,
Im stuck!! what happens when this function returns a function?

Answer 1

第一个所做的就是返回一个函数，该函数将在超时发生后调用。

它的目的是为 for 循环的每次迭代创建一个子范围，以便递增的 i 不会被每次迭代覆盖。

更多解释:

让我们把它分成两个不同的部分:

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}

这是第一部分:

for(var i = 0; i < 10; i++) {
    setTimeout(function(){
        console.log(i); //9-9
    },1000);
}

现在，当您运行此循环时，您将始终获得包含 9 而不是 0 到 9 的 console.log()。这是因为每个 setTimeout 都使用对 i 的相同引用.

如果您将其中的 setTimeout 部分包装在一个匿名函数中，它会为每次迭代创建一个范围，允许每个 setTimeout 拥有它自己的 i 值。

for(var i = 0; i < 10; i++) {
    setTimeout((function(i) {
        return function() {
            console.log(i); // 0-9
        }
    })(i), 1000)
}

setTimeout 中的外部函数会立即执行，第一次迭代时 i 为 0，第二次迭代时为 1，依此类推。然后该函数依次返回一个函数，该函数是 setTimeout 使用的函数。使用不同的 i 值为循环的每次迭代生成并返回一个函数。