javascript - JavaScript 引用传递如何解释这种行为？

Question

我是 JavaScript 新手，最近偶然发现了这个问题，询问控制台会打印什么内容。由于引用传递，正确答案是 4 4 4 4。不过，我不明白这是怎么产生的结果。如果输出只是一个看起来仅依赖于 for 循环迭代的 i 值，为什么按引用传递会决定输出？

const array = [10, 21, 31, 41];

for(i = 0; i < array.length; i++) {
  setTimeout(function print(array){
      console.log(i)}, 3000);
}

Answer 1

好的，一步一步来:

const array = [10, 21, 31, 41];

for(i = 0; i < array.length; i++) {
  setTimeout(function print(array) { /* stuff... */ }, 3000);
}

// When we get to here, the value of i is 4.

当此代码片段运行时，我们迭代数组，并为每次迭代设置超时。当 for 循环完成时，我们调用了 setTimeout 四次，但是没有运行给 setTimeout 的函数。事实上，它们不会再运行 3 秒。

最重要的是，此时i的值为4。

三秒后...

最后，我们提供给 setTimeout 的函数 print 将运行。那么这个函数是什么样的？:

function print(array) { console.log(i); }

现在回想一下 i 的值现在是 4。因此它会打印 4 四次。这是因为在函数实际执行时才读取变量i的值，不是在函数声明时读取。 p>

基本上，在实际调用函数 print 时，i 是 4，因此，它毫不奇怪地打印 4。