【JS】预编译（图解）

微信订阅号：Rabbit_svip

预编译是js的一个特色，也算是闭包之前最难的一个知识点。

预编译有4句公式，而这4句公式只要背熟就能理解预编译。

这4句公式放在本文最末尾。

本节篇幅比较长，要理解的东西也比较多。

在学习预编译之前要记住下面这句话：

JS的声明和执行(赋值)是分开两步操作的，声明属于预编译环节。

---

要了解预编译，就要先了解变量声明。

变量声明又分为全局和局部。

局部变量和作用域有关，稍后会讲到。

全局变量声明要记住2句话

1、任何变量，如果未经声明就赋值，此变量就为全局变量所有。
2、一切声明的全局变量，都是window的属性。

微信订阅号：Rabbit_svip
微信订阅号：Rabbit_svip

在Console可以看到输出的window里面，有变量a。

微信订阅号：Rabbit_svip 微信订阅号：Rabbit_svip

如果输出 window.a ，那就直接输出了123了。

由此可以解析上面所说的全局变量的两句话。

在全局声明的变量，称为全局变量。全局变量的作用域就是全局。

局部变量的作用域通常是在函数内部。

全局作用域称为GO，全称：Global Object。

临时作用域成为AO，全称：Activation Object。

而GO又可以理解为window这个对象。

GO和AO要和JS的预编译一起理解。

【预编译公式】

1、创建GO/AO对象。
2、找形参和变量声明，将变量和形参名作为AO的属性名，值为undefined。
3、将实参值和形参统一。
4、在函数体里面找函数声明，值赋予函数体。

看下面的代码，理解GO和AO。
看下面的代码，理解GO和AO。

微信订阅号：Rabbit_svip

变量a是定义在全局上的变量。

b是声明在全局上的函数。

所以GO现在就有两个值，如下图所示。

微信订阅号：Rabbit_svip

在执行这段JS代码前，JS引擎会先把JS代码编译一遍。

这个编译的过程就是定义作用域的过程。

而最外层的作用域成为GO，GO里面现在就有a和b，而且值都是undefined。

上图就是完成了【预编译公式】的前两句。

由于这里是GO，所以第三句公式是不用管的。

接下来就执行第4句公式。GO就变成下图所示。

微信订阅号：Rabbit_svip

这时b的值就是一个函数体。

完成以上4句【预编译公式】后，GO就算是定义好了。

当预编译完成后，代码会按顺序执行。

这时执行第1行代码。

所以a的值就变成123。

第3-5行代码在JS运行时可以暂时忽略了。因为在预编译的时候已经提升了。

所以接着就运行第7行代码。

第7行代码运行后，就会执行第3-5行代码。由于第3-5行代码是一个函数体。所以这时又需要预编译一次。

函数会创建一个AO。而且还会继承父函数的作用域下的所有东西。

下图解析

微信订阅号：Rabbit_svip

函数b会产生一个AO，在这个过程中，函数b的AO首先会检查有没有形参，这里的形成是aa。还检测到定义了一个变量c。运行完【预编译公式】前两条，就形成上图所示的内容。

接着会执行【预编译公式】第三条：将实参值和形参统一。

所以aa的值这时就变成了123（在执行函数b的时候，从外面传了一个值给形参aa）。

最后在函数b里面寻找函数声明。由于这里没有函数声明。所以最终会形成下图所示内容。

微信订阅号：Rabbit_svip

以上就完成了函数b的预编译。

接下来的所有步骤都只是执行。比如执行变量c的赋值，最终让变量c的值变成888。

以上就是JS的整体执行过程和预编译的原理。熟记【预编译公式】。

---

从这里开始就是预编译的小案例（举更多例子解析什么是预编译）

【例子1】

微信订阅号：Rabbit_svip

上面的代码，在执行的时候（包含预编译时）会变成下图所示。

微信订阅号：Rabbit_svip

---

【预编译公式】

1. 创建GO/AO对象。

2. 找形参和变量声明，将变量和形参名作为AO的属性名，值为undefined。

3. 将实参值和形参统一。

4. 在函数体里面找函数声明，值赋予函数体。

函数声明是一等公民。****在预编译过程中，如果函数和变量名重名了。****函数胜！