javascript中的变量作用域混乱[重复]

Question

我在研究JS中变量作用域的概念时，在上面发现了这个例子：

(function() {
    var foo = 1;
    function bar() {
        var foo = 2;
    }
    bar();
    console.log(foo) //outputs 1
    if(true) {
        var foo = 3;
    }
    console.log(foo) //outputs 3
})();

此函数的输出为

1 
3

现在我很困惑，为什么foogets会在第二个日志中获得值3。即使在if语句中使用var声明foo时也是如此。在if中声明的foo不是应该在bar()中获得一个新实例吗？

Answer 1

if不引入作用域块（我理解在某些语言中会引入作用域块）。在JavaScript中，只有function(){}创建作用域块。

Answer 2

JavaScript中只有两种作用域；函数作用域和全局作用域。

if语句内部的代码没有自己的作用域，因此if语句内部的变量与其外部的变量相同。

在作用域中多次声明变量不会创建多个变量。忽略if语句中的var关键字，因为变量已经在作用域中声明过一次，所以它只是一个赋值。

还要注意，变量的声明被提升到作用域的顶部，因此即使声明在未执行的代码块内，变量仍然被创建：

var foo = 1; // a global variable
(function() {
  console.log(foo) //outputs "undefined"
  foo = 2; // sets the local variable
  if(false) {
    var foo = 3; // creates the local variable, but the assignment never happens
  }
  console.log(foo) //outputs 2
})();
console.log(foo) //outputs 1