用 var 提升

Question

为什么在第一种情况下会打印 x 是一个函数而不是未定义？(() => {    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 也不是函数！