Javascript 带有 let 变量的闭包

Question

为什么 javascript 闭包在这些示例中的工作方式不同？

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}
// Output: 0, 1, 2

let i = 0;
for (i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}
// Output: 3, 3, 3

Answer 1

在第一个代码示例中，您有三个个不同的 i 变量，并且在循环的每次迭代中，setTimeout 的回调函数关闭一个i 变量的不同 副本。

在第二个代码示例中，只有一个 i变量并且在循环的每次迭代中，setTimeout的回调函数关闭相同 i 可变。

第二个代码示例中只有一个i变量，因为您在循环外声明了它；结果，循环的每次迭代都会看到 same 变量 i.

为了在第二个代码示例中获得相同的输出，将其更改为如下所示：

let i = 0;

for (i = 0; i < 3; i++) {

  let j = i; // save a copy of the current value of 'i'
  
  setTimeout(() => {
    console.log(j);  // closure over a different 'j' variable in each iteration
  }, 1000);
}

Javascript 带有 let 变量的闭包

Javascript closures with let variable

javascript

closures