Javascript提升代码片段

Question

我正在研究JS提升的代码片段。其中一个片段看起来像

var employeeId = 'abc123';

function foo() {
    employeeId();
    return;

    function employeeId() {
        console.log(typeof employeeId);
    }
}
foo(); 

输出将是：function

我读过关于提升的文章，根据我的理解，所有变量都将被视为在函数的顶部声明，并在它们的实际声明/定义行中初始化。在这种情况下，employeeId函数标识符将在函数顶部声明为var employeeId，其值显然为undefined，因此函数的第一行应该抛出错误。

请告诉我为什么输出是function

Answer 1

var声明和函数声明都被悬挂到它们发生的范围的顶部(按这个顺序)；var的undefined作为它们的值，函数的绑定作为它们的值。只有在完成之后，函数中的任何一步一步的代码才会执行。

因此，您的示例实际上与以下内容相同：

var employeeId;                           // Declaration
function foo() {                          // Declaration
    function employeeId() {               // Declaration (shadows outer `employeeId`)
        console.log(typeof employeeId);
    }

    employeeId();
    return;
}
employeeId = 'abc123';
foo(); 

Answer 2

因此，函数的第一行应该抛出错误。

No，函数声明与值一起挂起(除非在内部块中声明)。

在你的代码中，

var employeeId = 'abc123';

function foo() {
    console.log(employeeId); //will print function body
    return;
      function employeeId() {
        console.log(typeof employeeId);
      }
}

但是如果函数声明在内部块中

var employeeId = 'abc123';

function foo() {
    console.log(employeeId); //will print undefined
    {
      function employeeId() {
        console.log(typeof employeeId);
      }
    }
    return;
}

Answer 3

发生这种情况时，函数声明将在变量之前悬挂。

在JavaScript中，函数和变量声明被悬挂在执行上下文的顶部。你需要记住这三条规则。

1. 变量和函数声明被悬挂在执行上下文的顶部。
2. 只有声明才会被悬挂，作业不会被悬挂。赋值发生在声明变量的地方。
3. 在提升过程中，函数声明优先于变量声明。

​

https://www.codingame.com/playgrounds/7974/understanding-hoisting-in-javascript