Skip to content

变量提升

提示

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

变量提升

var 的变量提升

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

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

js
var a;
console.log(a); // undefined
a = 1;
console.log(a); // 1

let/const 的变量提升

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

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

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

  1. let 深入理解---let 存在变量提升吗?
  2. hoisting-in-modern-javascript-let-const-and-var
  3. Are variables declared with let or const hoisted?

函数声明提升

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

js
s(); // 1
function s() {
  console.log(1);
}

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

js
console.log(s); // undefined
var s = function s() {
  console.log(1);
};
console.log(s); // f s(){console.log(1);}

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

js
var s = function () {
  console.log(0);
};
function s() {
  console.log(1);
}
s(); // 0

优先级

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

js
function s() {
  //函数声明
  console.log(1);
}

var s; // 变量声明

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

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

s(); // 0