Javascript 吊裝代碼片段

Question

我正在瀏覽 JS 提升的代碼片段。 其中一個片段看起來像

var employeeId = 'abc123';

function foo() {
    employeeId();
    return;

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

output 將是： function

我已經閱讀了有關提升的信息，並且根據我的理解，所有變量都將被視為在 function 的頂部聲明並在其實際聲明/定義的行中初始化。 在這種情況下， employeeId function 標識符將在 function 的頂部聲明為var employeeId ，其值顯然undefined ，因此 function 的第一行應該拋出錯誤。

請讓我知道為什么 output 是function ？

Answer 1

var聲明和函數聲明都被提升到它們出現的作用域的頂部（按這個順序）； var s 獲得undefined作為它們的值，函數的綁定將函數作為它們的值。 只有在完成之后，才會執行函數中的任何分步代碼。

因此，您的示例實際上與此相同：

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

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

Answer 2

因此函數的第一行應該拋出錯誤。

不，函數聲明與值一起提升（除非它在內部塊中聲明）。

在您的代碼中，

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

發生這種情況 function 聲明在變量之前被提升。

在 JavaScript function 和變量聲明被提升到執行上下文的頂部。 您需要記住這三個規則。

1. 變量和 function 聲明被提升到執行上下文的頂部。
2. 只有聲明被提升，分配不會被提升。 賦值發生在聲明變量的地方。
3. function聲明在提升中優先於變量聲明。

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