javascript - 函数声明的评估顺序

Question

使用下面的代码，它既不是 ES6，也不是“严格模式”，我期望结果是 'b' 因为 foo 的第二个声明应该覆盖第一个。但结果是'a'!

   {
      function foo() {
        console.log('a');
      }
    }

    function foo() {
      console.log('b');
    }

    foo(); // a  ????? Why not 'b' ????

如果您用额外的大括号将此代码示例括起来，那么结果将是预期的“b”。

{ // additional curly braces 
  {
    function foo() {
      console.log('a');
    }
  }

  function foo() {
    console.log('b');
  }

  foo(); // 'b' as expected !!

}// end additional curly braces 

为了进一步说明，请考虑以下附加示例:

foo('before declaration'); // outcome :  from outside block :before declaration

{
  function foo(s) {
    console.log('from inside block: ' + s);
  }
}

function foo(s) {
  console.log('from outside block :' + s);
}

foo('after declaration'); // outcome :  from inside block: after declaration

我认为正确的结果应该是

// from outside block :before declaration
// from outside block :after declaration

我无法在这里发现我的误解。

如果我再次像这样将完整的最后一个示例括在花括号中

{
  foo('before declaration'); // outcome :  from outside block :before declaration

  {
    function foo(s) {
      console.log('from inside block: ' + s);
    }
  }

  function foo(s) {
    console.log('from outside block :' + s);
  }

  foo('after declaration'); // outcome :  from outside block: after declaration

}

我会得到预期的结果。

Answer 1

在您的第一个声明中，您将 foo() 包含在 {} 中，这会更改声明的范围，但下一个声明是全局范围。来自 w3schools JavaScript Hoisting ,

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope

所以你的第二个声明实际上被移到了顶部，然后 {} 范围内的声明被执行，它覆盖了第一个声明并打印了 a。