JS 预编译代码实例剖析
了解 JavaScript 引擎在履行代码进程中所做的一些行为是十分必要的，这有助于咱们在遇到不可思议的调用时，可以大致定位问题所在。在我学习了预编译的相关常识，并依据该文章，引证其间的一段代码，结合“变量提高”、“函数提高”的小示例，对其进行具体的剖析，算是留作一份笔记稳固回忆、加深了解。
代码
console.log(a)
fn1(1)
var a = 123
console.log(a)
var fn1 = () => {
console.log(a)
}
function fn1(a) {
console.log(a)
var a = 666
console.log(a)
function a() {}
console.log(a)
var b = function () {}
console.log(b)
function c() {}
}
fn1(1)
过错的推导会让你以为上述代码的打印如下：
假如你判别首行报错，那么需求了解变量提高
或许你这样以为
undefined
undefined
666
[Function: a]
[Function: b]
123
undefined
666
[Function: a]
[Function: b]
实际上，上方的代码打印如下：
undefined
[Function: a]
666
666
[Function: b]
123
123
具体剖析
1. 创立大局目标 GO
在大局履行上下文中，创立大局目标 GO。
2. 加载当时 JS 文件
加载并解析当时的 JavaScript 文件。
3. 脚本语法剖析
进行语法剖析，保证代码没有语法过错。
4. 当时 JS 文件预编译
4-1. 查找变量声明
GO = {
a: undefined
}
4-2. 查找函数声明（除了函数表达式）
GO = {
a: undefined,
fn1: function fn1(a) {}
}
5. 正常履行（履行到函数调用前）
console.log(a) // 打印 undefined
fn1(1) // 履行到这儿了，当心，函数也有预编译，履行前一刻完结
6. 函数预编译
6-1. 创立活泼目标 AO
AO = {}
6-2. 查找变量和形参
AO = {
a: undefined,
b: undefined
}
6-3. 实参值和形参一致
AO = {
a: 1,
b: undefined
}
6-4. 查找函数（非函数表达式）
AO = {
a: function a() {},
b: undefined,
c: function c() {}
}
7. 正常履行函数（依据 AO）
console.log(a) // 打印 function a() {}
var a = 666 // a 改动，AO.a = 666
console.log(a) // 打印 666
function a() {} // 该声明已提高过，不会掩盖
console.log(a) // 打印 666
var b = function () {} // b 改动，AO.b = function () {}
console.log(b) // 打印 function () {}
function c() {} // 该声明已提高过，不会掩盖
8. 接着履行函数外代码，履行到下个函数调用前
fn1(1) // 已叙述，上续
var a = 123 // GO 目标中的 a 改动为 123（undefined > 123）
console.log(a) // 打印 123
var fn1 = () => { // fn1 改动，GO.fn1 = () => {...}
console.log(a)
}
function fn1(a) { // 该声明已提高过（函数提高），不会掩盖
...
}
fn1(1) // 履行到这儿时，预编译
9. 函数预编译
9-1. 创立活泼目标 AO
AO = {}
9-2. 查找变量和形参
AO = {
a: undefined
}
9-3. 实参值和形参一致
AO = {
a: 1
}
9-4. 查找函数（非函数表达式）
AO = {
a: 1
}
10. 正常履行函数（依据 AO）
console.log(a) // a 不存在当时函数效果域，往上级查找，找到 GO.a，打印 123
总结
- 大局预编译：创立 GO 目标，查找变量声明和函数声明。
- 函数预编译：创立 AO 目标，查找变量和形参，实参值和形参一致，查找函数声明。
- 履行阶段：依照代码次序履行，变量赋值和函数调用。
