javascript - `let` 的解释和使用 for 循环的 block 范围

Question

我了解 let防止重复声明，这很好。

let x;
let x; // error!

用 let 声明的变量也可以用于可以预期的闭包

let i = 100;
setTimeout(function () { console.log(i) }, i); // '100' after 100 ms

我有点难以理解的是如何 let适用于循环。这似乎特定于 for循环。考虑经典问题:

// prints '10' 10 times
for (var i = 0; i < 10; i++) { process.nextTick(_ => console.log(i)) }
// prints '0' through '9'
for (let i = 0; i < 10; i++) { process.nextTick(_ => console.log(i)) }

为什么使用 let在这种情况下工作？在我的想象中，即使只有一个方 block 是可见的， for实际上为每次迭代创建一个单独的 block ， let声明是在该 block 内完成的......但只有一个 let声明初始化值。这只是 ES6 的语法糖吗？这是如何工作的？

我了解 var 之间的区别和 let并在上面说明了它们。我特别想了解为什么不同的声明使用 for 会导致不同的输出。环形。

Answer 1

Is this just syntactic sugar for ES6?

不，它不仅仅是语法糖。血淋淋的细节埋在 §13.6.3.9 CreatePerIterationEnvironment .

How is this working?

如果您使用 let for 中的关键字语句，它将检查它绑定(bind)的名称，然后

使用这些名称创建一个新的词法环境 a) 初始化表达式 b) 每次迭代(之前评估增量表达式)

将具有这些名称的所有变量的值从一个环境复制到下一个环境

你的循环语句 for (var i = 0; i < 10; i++) process.nextTick(_ => console.log(i));脱糖到一个简单的

// omitting braces when they don't introduce a block
var i;
i = 0;
if (i < 10)
    process.nextTick(_ => console.log(i))
    i++;
    if (i < 10)
        process.nextTick(_ => console.log(i))
        i++;
        …

而 for (let i = 0; i < 10; i++) process.nextTick(_ => console.log(i));对更复杂的情况进行“脱糖”

// using braces to explicitly denote block scopes,
// using indentation for control flow
{ let i;
  i = 0;
  __status = {i};
}
{ let {i} = __status;
  if (i < 10)
      process.nextTick(_ => console.log(i))
      __status = {i};
}   { let {i} = __status;
      i++;
      if (i < 10)
          process.nextTick(_ => console.log(i))
          __status = {i};
    }   { let {i} = __status;
          i++;
          …