为什么这个 javascript 片段记录 1？

Question

在一次采访中，我被要求猜测以下片段的输出：

var foo = 1;

    

function bar() {

    foo = 10;

    return;

    function foo() {

    }

}

bar();

console.log(foo);

我认为输出将是 10，因为 bar 函数在重新分配 foo 的值后立即返回，但实际输出是 1。是因为函数定义具有相同的变量名 (foo) 吗？foo是否为内部变量创建了一个新范围bar？

Answer 1

这是一个在面试中提出的令人讨厌（而且有点毫无意义）的问题！它确实与foo范围内的功能有关bar- 如果没有它，它会按照您的预期进行。 var foo = 1;    function bar() {    foo = 10;    return;    }bar();console.log(foo);原因是由于“提升”——其中的函数声明作为一个新变量bar被提升到函数的开头bar，并且由于 javascript 的性质允许您在运行时更改类型，它允许您设置它（而不是全球）foo到10。它与这段代码本质上是一样的： var foo = 1;    function bar() {    var foo;    foo = 10;}bar();console.log(foo);

Answer 2

内部的函数声明bar创建了一个新的局部名称foo，它覆盖了外部的名称。本质上，该function foo() {}行被提升到函数的顶部。你可以在这里看到这个：function bar() {    console.log(foo);    foo = 10;    console.log(foo);    return;    function foo() {}}bar();所以foo = 10修改局部foo名称，而不是全局名称。