node.js - 当我在另一个函数中使用 setTimeout 并尝试打印传递的参数的值时，到底发生了什么？

Question

当我必须完成杂耍异步挑战时，我正在经历 learnyounode，这就是我遇到的类似的更简单的问题，如下所示:

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

上面的代码片段给出的输出为:

10
10
10
10
10
10
10
10
10
10

这不是预期的结果，但是当我按以下方式编写时:

// try print numbers 0 - 9
var f = function(i) {
  setTimeout(function() {
    console.log(i)
  })
}
for (var i = 0; i < 10; i++)f(i);

我得到了想要的输出。那么当我在该函数中编写 setTimeout() 部分时到底发生了什么？

Answer 1

在第一个片段中，i 变量是在函数外部定义的。您可以访问它，只是因为它位于其(更高级别)范围内，并且函数自己(或任何中间体，如果存在)中没有定义另一个 i 变量。

for 循环设置十个超时(排队到事件循环中)。但它们只有在 for 循环完成后才会执行，因此 i 值为 10(最后一次迭代)。

在第二个示例中，您将 setTimeout() 包含在闭包(函数)内，该闭包在每次循环迭代时立即执行。

在这些迭代中，当调用函数时，i 的当前值作为参数传递(也称为 i，在本地函数的作用域中定义，并且由于它具有相同的名称，隐藏了您没有调用同一变量的事实)。

请参阅下面对第二个示例的轻微修改:

// try print numbers 0 - 9
var f = function(j) {
  setTimeout(function() {
    console.log(i, j)
  })
}
for (var i = 0; i < 10; i++)f(i);

// Output:
// -------
// 10 0
// 10 1
// 10 2
// 10 3
// 10 4
// 10 5
// 10 6
// 10 7
// 10 8
// 10 9