JavaScript变量提升

在JavaScript中变量声明与函数声明都会被提升到作用域顶部，优先级依次为: 函数声明 变量声明 变量赋值。

变量提升

var的变量提升

1
2
3
4
console.log(a); // undefined
var a = 1;
console.log(a); // 1
// console.log(b); // ReferenceError: b is not defined

为了显示a与b的区别，打印了一下未声明的变量b，其抛出了一个ReferenceError异常，而a并未抛出异常，其实对a的定义并赋值类似于以下的操作，将a的声明提升到作用域最顶端，然后再执行赋值操作。

1
2
3
4
var a;
console.log(a); // undefined
a = 1;
console.log(a); // 1

let/const的变量提升

let与const都具有块级作用域，对于变量提升的相关问题的表现是相同的。实际上关于这个问题目前有所分歧，但在ES6的文档中出现了var/let hoisting字样，也就是说官方文档说明let与var一样，都存在变量提升，我觉得能够接受的说法是:

  • let的「创建」过程被提升了，但是初始化没有提升。
  • var的「创建」和「初始化」都被提升了。
  • function的「创建」「初始化」和「赋值」都被提升了。

JS中无论哪种形式声明var、let、const、function、function*、class都会存在提升现象，不同的是var,function,function*的声明会在提升时进行初始化赋值为undefined，因此访问这些变量的时候，不会报ReferenceError异常，而使用let,const,class声明的变量，被提升后不会被初始化，这些变量所处的状态被称为temporal dead zone，此时如果访问这些变量会抛出ReferenceError异常，看上去就像没被提升一样。关于这个问题的讨论，可以参考下边的链接，尤其是在stackoverflow中的回答。

1
2
3
https://www.jianshu.com/p/0f49c88cf169
https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b290405adfda
https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6

函数声明提升

函数声明会将声明与赋值都提前，也就是整个函数体都会被提升到作用域顶部。

1
2
3
4
s(); // 1
function s(){
    console.log(1);
}

函数表达式只会提升变量的声明，本质上是变量提升并将一个匿名函数对象赋值给变量。

1
2
3
4
5
console.log(s); // undefined
var s = function s(){
    console.log(1);
}
console.log(s);  // f s(){console.log(1);}

由此来看，直接进行函数声明与函数表达式声明的函数之间就存在一个优先级关系。

1
2
3
4
5
6
7
var s = function(){
    console.log(0);
}
function s(){
    console.log(1);
}
s(); // 0

优先级

在JS中函数是第一等公民，在《你不知道的JavaScript》(上卷)一书的第40页中写到，函数会首先被提升，然后才是变量。也就是说，同一作用域下提升，函数会在更前面。即在JS引擎的执行的优先级是函数声明、变量声明、变量赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function s(){ //函数声明
    console.log(1);
}

var s; // 变量声明

// 函数已声明`a` 相同的变量名`var`声明会被直接忽略
console.log(s); // f s(){...}  

s = function(){ // 变量赋值
    console.log(0);
}

s(); // 0

参考

1
2
3
4
5
6
https://www.jianshu.com/p/0f49c88cf169
https://www.cnblogs.com/echolun/p/7612142.html
https://www.cnblogs.com/miacara94/p/9173843.html
https://blog.csdn.net/qq_41893551/article/details/83011752
https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b290405adfda
https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6