Javascript-子块中的变量重新建模//变量阴影

Question

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

let-JavaScript|MDN说：

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的值没有改变，为什么现在有两个let变量同名？

Answer 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')
}

而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)
}

Answer 2

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

破解JavaScript可变范围并提升

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

以及此处：

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

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