JS 预编译代码实例分析

赵丹

了解 JavaScript 引擎在执行代码过程中所做的一些行为是非常必要的，这有助于我们在遇到莫名其妙的调用时，能够大致定位问题所在。在我学习了预编译的相关知识，并基于该文章，引用其中的一段代码，结合“变量提升”、“函数提升”的小示例，对其进行详细的分析，算是留作一份笔记巩固记忆、加深理解。
代码

1. console.log(a)
2. fn1(1)
3. var a = 123
4. console.log(a)
6. var fn1 = () => {
7.   console.log(a)
8. }
10. function fn1(a) {
11.   console.log(a)
12.   var a = 666
13.   console.log(a)
14.   function a() {}
15.   console.log(a)
16.   var b = function () {}
17.   console.log(b)
18.   function c() {}
19. }
21. fn1(1)

复制代码

错误的推导会让你认为上述代码的打印如下：

1. 如果你判断首行报错，那么需要了解变量提升
2. 或者你这样认为
3. undefined
4. undefined
5. 666
6. [Function: a]
7. [Function: b]
8. 123
9. undefined
10. 666
11. [Function: a]
12. [Function: b]

复制代码

实际上，上方的代码打印如下：

1. undefined
2. [Function: a]
3. 666
4. 666
5. [Function: b]
6. 123
7. 123

复制代码

详细分析

1. 创建全局对象 GO

在全局执行上下文中，创建全局对象 GO。
2. 加载当前 JS 文件

加载并解析当前的 JavaScript 文件。
3. 脚本语法分析

进行语法分析，确保代码没有语法错误。
4. 当前 JS 文件预编译

4-1. 查找变量声明

1. GO = {
2.   a: undefined
3. }

复制代码

4-2. 查找函数声明（除了函数表达式）

1. GO = {
2.   a: undefined,
3.   fn1: function fn1(a) {}
4. }

复制代码

5. 正常执行（执行到函数调用前）

1. console.log(a) // 打印 undefined
2. fn1(1) // 执行到这里了，小心，函数也有预编译，执行前一刻完成

复制代码

6. 函数预编译

6-1. 创建活跃对象 AO

1. AO = {}

复制代码

6-2. 查找变量和形参

1. AO = {
2.   a: undefined,
3.   b: undefined
4. }

复制代码

6-3. 实参值和形参统一

1. AO = {
2.   a: 1,
3.   b: undefined
4. }

复制代码

6-4. 查找函数（非函数表达式）

1. AO = {
2.   a: function a() {},
3.   b: undefined,
4.   c: function c() {}
5. }

复制代码

7. 正常执行函数（根据 AO）

1. console.log(a)  // 打印 function a() {}
2. var a = 666  // a 改变，AO.a = 666
3. console.log(a)  // 打印 666
4. function a() {}  // 该声明已提升过，不会覆盖
5. console.log(a)  // 打印 666
6. var b = function () {}  // b 改变，AO.b = function () {}
7. console.log(b)  // 打印 function () {}
8. function c() {}  // 该声明已提升过，不会覆盖

复制代码

8. 接着执行函数外代码，执行到下个函数调用前

1. fn1(1) // 已讲述，上续
2. var a = 123  // GO 对象中的 a 改变为 123（undefined > 123）
3. console.log(a)  // 打印 123
5. var fn1 = () => {  // fn1 改变，GO.fn1 = () => {...}
6.   console.log(a)
7. }
9. function fn1(a) {  // 该声明已提升过（函数提升），不会覆盖
10.   ...
11. }
13. fn1(1)  // 执行到这里时，预编译

复制代码

9. 函数预编译

9-1. 创建活跃对象 AO

1. AO = {}

复制代码

9-2. 查找变量和形参

1. AO = {
2.   a: undefined
3. }

复制代码

9-3. 实参值和形参统一

1. AO = {
2.   a: 1
3. }

复制代码

9-4. 查找函数（非函数表达式）

1. AO = {
2.   a: 1
3. }

复制代码

10. 正常执行函数（根据 AO）

1. console.log(a)  // a 不存在当前函数作用域，往上级查找，找到 GO.a，打印 123

复制代码

总结

• 全局预编译：创建 GO 对象，查找变量声明和函数声明。
  
• 函数预编译：创建 AO 对象，查找变量和形参，实参值和形参统一，查找函数声明。
  
• 执行阶段：按照代码顺序执行，变量赋值和函数调用。
  

来源:https://www.cnblogs.com/gupingan/p/18577692
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！