用 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 startvar x = undefined;function x() {}; // a function is fully hoisted. So x references the function.// creation phase end// execution phase startconsole.log(x); // therefore x is a function// execution phase end您的第二个示例的解释与您编写的略有不同：// creation phase startvar x = undefined;function x() {}// creation phase end// execution phase startx = 1;console.log(x); // therefore x got overwritten, therefore 1// execution phase end需要了解的一件有趣的事情是： 如果您像这样编写第一个示例......var x(function x() {}) // round bracketsconsole.log(x)...函数声明的提升不会发生，因为引擎看到的第一件事既不是 var 也不是函数！