JS系列（七）：变量提升

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

// 打印结果
// 2

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

// 打印结果
// undefined

两段代码：

1. 代码1输出结果『超出预期』，通常会认为结果为：undefined，但实际结果却是2；
2. 代码2输出结果『符合预期』；

Why ？

这就涉及到JS引擎：编译与执行了：

1. 编译阶段：会将变量声明提升至所在作用域最前面；
2. 执行阶段：赋值或调用所处位置不变；

注：

1. 后面会讲到函数的提升；
2. 变量提升是早期开发人员的一个bug，后来也未修正；

我们来分析上面两段代码：

1. 编译阶段，将变量声明提升至所在作用域最前面（这里是全局作用域）：

var a;

2. 执行阶段，赋值or函数调用所处位置不变：

a = 2;
console.log(a);

 --------------------------------------------------------
| 所以，实际编译后的代码形式如下：
--------------------------------------------------------
var a;
a = 2;
console.log(a); // 2

1. 编译阶段，将变量声明提升至所在作用域最前面（这里是全局作用域）：

var a;

2. 执行阶段，赋值or函数调用所处位置不变：

console.log(a);
a = 2;

 --------------------------------------------------------
| 所以，实际编译后的代码形式如下：
--------------------------------------------------------
var a;
console.log(a); // undefined
a = 2;

/**
 * 这里有个细节：
 * 代码中是 var a = 2
 * 但是在编译阶段，将其拆成了两条语句：
 * var a;
 * a = 2;
 */

小测试(写出编译后的代码)：

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

 --------------------------------------------------------
| 所以，实际编译后的代码形式如下：
 --------------------------------------------------------
function foo () {
    var a;
    console.log(a); // undefined
    a = 2;
}