为什么这个 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名称，而不是全局名称。