Javascript - 在子块中重新定义变量 // 变量阴影答案

【问题标题】：Javascript - variable re-delcaring in the sub-block // Variable ShadowingJavascript - 在子块中重新定义变量 // 变量阴影
【发布时间】：2018-08-02 22:40:23
【问题描述】：

我试图了解 Javascript 如何处理在当前范围的子块中重新声明 let 变量。

let - JavaScript | MDN says:

let 声明的变量的作用域在它们所在的块中被定义，以及在任何包含的子块中。

如果我们尝试这样做，它会按预期工作：

function letTest() {
  let x = 1;

  for(var i = 0; i < 1; i++) {
    console.log(x);  // logs - 1
  }
}

另一个例子。现在我使用for 子块为0 的let 变量分配一个新值，并通过for 循环。这也按预期工作。

function letTest() {
  let x = 5;
  console.log(x);  // logs – 5

  for( x = 0; x < 12; x++) {
    console.log(x);  // logs – 0, 1, 2, 3, 4, 5, 6, … 10, 11
  }

  console.log(x);  // logs - 12
}

但是，当我们在 for 子块中使用关键字 let 重新声明并为同一变量 x 分配新值时会发生什么：

function letTest() {
  let x = 5;
  console.log(x);  // logs – 5

  for( let x = 0; x < 12; x++) {
    console.log(x);  // logs – 1, 2, 3, 4, 5, 6, … 10, 11
  }

  console.log(x);  // logs - 5
}

这里有什么机制在起作用，到底发生了什么？

为什么let x = 5的值没有变，为什么现在有2个let同名变量？

【问题讨论】：

标签： javascript variables scope hoisting shadowing

【解决方案1】：

let 语句创建一个块范围变量。

function letTest() {
  let x = 5;
  console.log(x);  // x = 5 (same 'x')

  for(let x = 0; x < 12; x++) {
    console.log(x);  // x = 1, 2, …, 10, 11 (different 'x')
  }

  console.log(x);  // x - 5 (same 'x')
}

while var 语句创建函数范围变量。

function varTest() {
  var x = 5;
  console.log(x);  // x = 5

  for(var x = 0; x < 12; x++) {
    console.log(x);  // x = 1, 2, …, 10, 11
  }

  console.log(x);  // x = 12 ('x' from the for-loop)
}

【讨论】：

是的，但是这里有什么机制在起作用，x=5 的同一个变量在 for 循环内有一个范围，一旦我们在 for 循环内重新声明它会发生什么。它们如何共存？
结果应该是 11 而不是 12
'x' 应该是 12，因为 for 循环将 x 增加到 12（不小于 12）。因此我们离开了 for 循环。

【解决方案2】：

我相信我在这里找到了答案：

Demystifying JavaScript Variable Scope and Hoisting

在 JavaScript 中，可以在以下位置指定具有相同名称的变量多层嵌套范围。在这种情况下，局部变量增益优先于全局变量。如果您声明一个局部变量和一个全局变量同名，局部变量取在函数中使用它时的优先级。这种行为是称为阴影。简单地说，内部变量遮蔽了外部。

这里也是：

https://stackoverflow.com/a/11901489/6375464

在计算机编程中，变量阴影发生在变量在特定范围内声明（决策块、方法或内部 class) 与在外部作用域中声明的变量具有相同的名称。据说这个外部变量被遮蔽了......

【讨论】：