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