js (3) 预编译过程理解

js执行的三个步骤：

1. 语法分析：整体扫描是否有语法错误；
2. 预编译：在函数执行前一刻进行；
3. 解释执行：翻译一句，执行一句。

预编译的几条规则：

1. 函数声明整体提升；
2. 变量声明提升；
3. 变量未声明则进行赋值，认为是全局变量，归window所有；
4. 全局上的变量，即使声明了，也归window所有；

预编译过程：

1. 创建AO（active object); （全局生成GO global object)
2. 找出形参、变量声明，作为AO的对象属性名，值为undefined;
3. 将实参与形参统一； (全局无此步）
4. 找出函数体里的函数声明，函数名称为AO的对象属性名，值赋为函数体；

注意：先创建GO，再创建AO.

实例解释

下面举一个例子来理解所有的规则：

function fn(a){
	console.log(a); //打印function a() {}
	var a = 123;
	console.log(a); //打印123
	function a() {} 
	console.log(a); //打印123
	var b = function () {};
	console.log(b); //打印function () {}
	function d() {}
}
fn(1);

js执行步骤如下：

语法分析：整体扫描是否有语法错误；

预编译：

• 首先创建GO：

GO: {
fn: function fn(a) {……函数里面的代码……}
}

执行fn(1)前夕创建AO，根据预编译的四个步骤，AO如下：

AO: {
	a: function a() {},
	b: undefined,
	d: function d() {}
}

解释执行：

变量声明已在预编译阶段解读，在解释执行过程中，只进行赋值。

---

本文参考自视频：https://ke.qq.com/course/231577?taid=2841395744442521