变量提升的原理

共计 531 个字符，预计需要花费 2 分钟才能阅读完成。

当程序执行这一段代码时
console.log(a);
var a = 2;
有经验的同学都知道控制台会输出 undefined 而不是报错 a is not defined 这是因为此时发生了变量提升，代码可以理解为以下形式
var a;
console.log(a);// undefined
a = 2;
这是为什么呢，让我先说明以下几点

一段 JavaScript 代码，是先由编译器编译成可执行代码，再交给引擎去执行的。
用 var 关键字声明的变量是在编译阶段声明的。

每当编译器遇到 var xxx，都会去查找当前作用域是否已存在变量 xxx，如果 xxx 已存在，则忽略该声明，反之，在当前作用域声明变量 xxx。所以当成程序执行下面代码时
console.log(a);
var a = 2;

首先编译器查找当前作用域是否存在变量 a，发现 a 并不存在，声明变量 a。
再由引擎执行由编译器生成的代码 console.log(a)，此时变量 a 被编译器已经声明, 但是还未被赋值，所以此时控制台输出的值是 undefined。

a = 2，此时变量 a 的值为 2。

其实关键点就在于，由 var 关键字声明的变量是在编译阶段声明的，所以会出现变量提升的情况。但是编译器对 ES6 语法中的 const 和 let 关键字声明的变量则不会提前声明，所以不会出现变量提升。