js所有的变量声明都会被提升到顶部吗？

Posted 2023-04-12

顶部就是一群undefined吗

参考技术A 【所有的变量声明被提升到顶部】, 你这句话有瑕疵。
变量提升，这个指的是相同作用域下的变量，提升到当前域的顶部。比如
function test ()
console.log(a); // 返回undefined, 不会报错 (test函数内部访问)

var a = 1;

var b = 2;


console.log(a); // 直接报错， a is not defined (test函数外部访问)

a 和 b 都是在 test 函数内部声明的，所以他们都处于 test 的函数作用域中，声明被提升到顶部，所以你在test里面访问是没问题的。

但是当你在test函数外部访问 a 时，是会报错的。因为 a 变量的提升只会在 test 函数里面被提升。不会提升到最外面来。

其实变量提升是 ES5 阶段的特性（即通过 var 关键字声明的变量），在 ES6 中通过 let 声明的变量是不存在变量提升的。ES5 没有块级作用域，而ES6存在块级作用域。

var的变量提升的底层原理是什么？

原理：JS引擎的工作方式是①先解析代码，获取所有被声明的变量；②然后在运行。也就是专业来说是分为预处理和执行两个阶段。

变量提升的定义：所有变量的声明语句都会被提升到代码头部，这就是变量提升。

例如：

console.log(a);
var a =1;

 

以上语句并不会报错，只是提示undefined。实际在js引擎中的运行过程是：

var a;
console.log(a);
a =1;

实际运行表示变量a已声明，但还未赋值。

 

但是变量提升只对var命令声明的变量有效，如果一个变量不是用var命令声明的，就不会发生变量提升。

console.log(aa);
aa =1;

以上代码将会报错:ReferenceError: aa is not defined。

 

补充：js里的function也可看做变量，也存在变量提升情况

a();

function a(){
    console.log(1);
};

表面上，上面代码好像在声明之前就调用了函数a。但是实际在js引擎中，由于“变量提升”，函数a定义部分被提升到了代码头部，也就是在调用之前已经声明了。

但是！如果采用赋值语句定义函数，JavaScript就会报错：

a();

var a = function(){
    console.log(1);
};

// TypeError: a is not a function

因为js引擎把变量声明提升，此时，a就是一个变量，而并不是一个function，以下是js引擎实际运行代码：

var a;
a();

a = function(){
    console.log(1);
};