javascript - 为什么 JavaScript 中的 IF 语句允许重新声明变量

Question

我知道 if 语句不像函数那样有自己的作用域，这意味着它与包含的上下文共享相同的作用域。但如果是这样，为什么我允许再次重新声明相同的变量？

var foo = 123;
if (true) {
    console.log(foo) // 123
    var foo = 456; // Shouldnt it throw an error if refers to same variable?
}
console.log(foo) // 456

Answer 1

我们需要了解编译器和Javascript运行时引擎如何处理和执行代码。

编译器

让我们看看编译器如何查看下面的代码片段并创建适当的范围。

1. var foo = 123;
2. if (true) {
3.   console.log(foo) // 123
4.   var foo = 456;
5. }
6. console.log(foo) // 456

1. 在第 1 行，编译器在第一次遇到 foo 标识符时将其置于全局范围内。
2. 在第 2 行，编译器创建一个 block 作用域来保存标识符的引用。
3. 第 3 行是执行上下文，因此编译器会移至下一行。
4. 在第 4 行，编译器看到 foo 标识符，并检查该标识符是否已存在于全局作用域中(注意:var 没有 block 作用域。所以它看起来在范围上一层，即全局范围)。这里的全局作用域已经有了标识符，因此，它会转到下一行代码。
5. 第 6 行是执行上下文。

Javascript(JS)引擎

它使用编译器创建的作用域分配并执行代码。

1. 第 1 行运行时在范围内查找标识符 foo，因为它存在，所以会分配值 123
2. 第 2 行是真的，因此它进入了区 block 。
3. 在第 3 行，它在 block 作用域中查找标识符 foo。由于 foo 不存在于 block 作用域中，因此它看起来比全局作用域高一级。 foo 在全局范围内可用，值为 123。所以 console.log(foo) 是 123
4. 第 4 行:它在 block 作用域中查找标识符 foo。由于 foo 不存在于 block 作用域中，因此它看起来比全局作用域高一级。 foo 在全局范围内可用，因此它将值 456 重新分配给 foo。现在 foo 是 456。
5. 第 6 行。JS 引擎在当前作用域(即全局作用域)中查找 foo 标识符。 foo 在全局范围内可用，值为 456。

现在让我们看看问题

为什么 JavaScript 中的 IF 语句允许重新声明变量？

var foo = 456; 看起来像是重新声明，但实际上并没有这样做。它使用相同的全局声明标识符。

在某些情况下，为了可读性目的而采用这种模式是很好的。

function test() {
  var siteId;
   
  if(condition) {
    // more code 100+ lines
    siteId = getId();
  } else {
    var siteId = 1001; // redeclaring here we are communicating the reader for sure we have the `siteId`
  }
   
 // other code

}