使用 var 提升

Question

为什么在第一种情况下会打印出 x 是一个函数而不是 undefined？

(() => {
    var x

    function x() {}

    console.log(x)
})()

> ƒ x() {}

(() => {
    var x = 1

    function x() {}

    console.log(x)
})()

> 1

Answer 1

这只是因为 JavaScript 如何处理提升。具有 function VARIABLENAME() {} 的函数在变量的“存在”调用下被调出，并且变量变化值保留在其位置，但由于函数被向上移动而相对向下移动。

第一组

(() => {
    var x

    function x() {}

    console.log(x)
})()

// This gets converted to:
(() => {
    var x // This variable exists

    x = function x() {} // Ya know that variable called x? well its a function

    console.log(x)
})()

第二组

(() => {
    var x = 1

    function x() {}

    console.log(x)
})()

// This gets converted to:
(() => {
    var x // the variable x exists

    x = function x() {} // Functions are moved to the top, under variable declarations
    
    x = 1 // x is now the value 1

    console.log(x)
})()

Answer 2

提升是在编译过程中将变量（声明的左侧）或函数声明移动到相应环境顶部的行为。

Javascript 引擎在代码执行之前的创建阶段为变量和函数分配内存。

你的第一个例子得到的解释就像你写的那样：

// creation phase start
var x = undefined;
function x() {}; // a function is fully hoisted. So x references the function.
// creation phase end

// execution phase start
console.log(x); // therefore x is a function
// execution phase end

你的第二个例子得到的解释与你写的有点不同：

// creation phase start
var x = undefined;
function x() {}
// creation phase end

// execution phase start
x = 1;
console.log(x); // therefore x got overwritten, therefore 1
// execution phase end

还有一件有趣的事要知道： 如果你这样写你的第一个例子......

var x

(function x() {}) // round brackets

console.log(x)

...函数声明的提升不会发生，因为引擎首先看到的既不是 var 也不是函数！

使用 var 提升

Hoisting with var

javascript

var

function

hoisting

第一组

第二组