JS预编译及全局对象GO和活动对象AO

一、概念

1、什么是预编译

我们知道 JavaScript 是解释型语言。
解释型语言：代码逐行解析，逐行执行。也就是说，从上到下，解析一行执行一行。

那么什么是预编译呢？

在JavaScript真正被解析之前，js引擎会首先把整个文件进行预处理，以消除一些歧义，这个预处理的过程就被称为预编译。

我们先看一段奇怪的代码：

console.log(a);  // function a() {console.log(a);}
var a = 123;
console.log(a);  // 123
function a() {
	console.log(a);
}
a();  // 报错  VM219:7 Uncaught TypeError: a is not a function

2、全局对象GO

全局对象（Global Object）

• 在浏览器环境中，js引擎会整合<script>标签中的内容，产生window对象，这个window对象就是全局对象。浏览器中，window对象就是GO
• 在node环境中，会产生global对象

全局变量：在script标签中定义的变量作为window对象的属性存在
全局函数：在script标签中定义的函数作为window对象的方法存在

思考：如果我们声明了一个变量a，又声明了一个函数a，这个时候应该怎么办呢，就像我们上述那段奇怪的代码，这就是我们需要预处理要做的事情。

3、活动对象AO

活动对象（Activation Object），也叫激活对象

• 在函数被调用时产生，用来保存当前函数内部的执行环境（Execution Context），也叫执行期上下文
• 在函数调用结束时销毁

局部变量： 在函数内部声明的变量叫做局部变量，局部变量作为AO的属性存在

function a() {
	var i = 0;
	console.log(i);
}
a()

在函数a的外部是不能访问变量 i 的，变量 i 只在函数a的范围内才能使用。其实，这也是作用域的由来。

• 如果不执行函数 a，就不会产生AO对象，就不会存在 i 属性
• 如果执行函数a，产生一个AO对象，并将变量 i 作为AO对象的属性
• 函数执行完以后，AO对象被销毁，也就意味着不能使用 i 属性

局部函数：在函数内部声明的函数叫局部函数，局部函数作为AO对象的方法存在

二、全局预编译

1、流程

（1）查找变量声明，作为GO对象的属性名，值为undefined
（2）查找函数声明，作为GO对象的属性名，值为function

这也是为什么函数提升优先级比变量提升优先级高的原因，因为先找变量声明，再找函数声明，函数声明会把同名的变量替换掉

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

变量声明：通过var关键字声明变量

var a; // 变量声明
var a = 111; // 变量声明+变量赋值

函数声明：通过function关键字声明函数

function a() {} // 函数声明
vat a = function() {}   // 函数表达式，不是函数声明

2、看一个例子

console.log(a);
var a = 100;
console.log(a);
function a() {
	console.log(111);
}
console.log(a);
a();

结果：

分析结果原因：

预编译的过程：
1、第一步：产生window对象
2、第二步：先查找变量的声明，把a作为window对象的属性名，属性的值为undefined
3、第三步：再查找函数的声明，把函数名a作为window对象的属性名，属性值是function

全局预编译结束后，代码从上到下依次执行。所以在第一行打印a会打印出一个function。
在第二行会执行一个对a的赋值为100，所以第三行打印a为100。4、5、6行在预编译的时候已经走过了，所以不再执行，所以在第七行打印的a仍然是100。在第8行调用a的时候，这时候a是100，不是函数，所以会报错。

三、函数预编译

1、流程

（1）在函数被调用时，为当前函数产生AO对象。每一个函数在每一次执行的时候都会产生一个AO对象，这个AO对象是独立的。
（2）查找形参和变量声明作为AO对象的属性名，值为undefined
（3）使用实参的值去改变形参的值
（4）查找函数声明，函数名作为AO对象的属性名，值为function

2、示例

示例一

function a(test) {
	var i = 0;
	function b() {
		console.log(222);
	}
	b()
}
a(1);

流程：先完成全局预编译，再完成函数预编译

1、全局预编译，产生一个window对象GO：

1. 查找变量的声明，无变量声明
2. 查找函数的声明，将函数a作为window对象的属性名，值为function。

2、全局预编译结束，执行代码，1-7行为函数声明，会被略过，直接执行第8行，调用函数a，产生函数a的AO对象

3、函数a的AO环境：

1. 查找形参test，局部变量i作为AO对象的属性名，值为undefined
2. 查找实参覆盖形参，实参1赋值给test，test值为1，i的值仍为undefined
3. 查找局部函数b，b作为AO对象的属性名，值为function

4、函数的预编译结束，执行函数

1. 执行以后 i 的值为0（第二行）；
2. 3-5行执行时被略过（因为这是函数声明），执行第6行，执行函数b（会产生函数b的AO对象，暂时先不深究），打印出222

示例二

function a(i) {
	var i;
	console.log(i);  // 1 而不是undefined
}
a(1);

function a(i) {
	var i = 2;
	console.log(i);  // 2
}
a(1);

示例三

function a(test) {
	console.log(b);
	var b = 0;
	console.log(b);
	function b() {
		console.log(222);
	}
}
a(1);

结果：