Javascript 提升代码片段

Question

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

var employeeId = 'abc123';

function foo() {
    employeeId();
    return;

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

输出将是：function

我已经阅读了关于提升的内容，根据我的理解，所有变量都将被视为在函数顶部声明并在其实际 declaration/definition 行初始化。在这种情况下，employeeId 函数标识符将在函数顶部声明为 var employeeId，其值显然是 undefined，因此函数的第一行应该抛出错误。

请告诉我为什么输出是 function?

Answer 1

var 声明和函数声明都被提升到它们出现的范围的顶部（按此顺序）； vars 获取 undefined 作为它们的值，函数的绑定获取函数作为它们的值。只有在完成之后，函数中的任何 step-by-step 代码才会执行。

因此您的示例实际上与此相同：

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

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

Answer 2

thus the very first line of the function should throw the error.

否，函数声明 与值一起被提升（除非它被声明在内部块内）。

在您的代码中，

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 中，函数和变量声明被提升到执行上下文的顶部。你需要记住这三个规则。

变量和函数声明被提升到执行上下文的顶部。
只有声明被提升，赋值没有被提升。赋值发生在声明变量的地方。
函数声明在提升中优先于变量声明。

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

Javascript 提升代码片段

Javascript hoisting code snippet

javascript

hoisting