JS 解析与执行过程【二】：函数预处理过程和函数执行过程

前言 ：

---

JS 解析与执行过程，习惯分为全局和函数两种不同状态，是为了方便理解，二者之间的一些不同点。这并不说明全局和函数的预处理，执行阶段是分开存在间隔性的。在之前我们了解过全局的预处理过程和执行过程。这里我们在来探讨下在函数 中它的 预处理 和 执行 阶段都有哪些特性。

• 函数预处理阶段 ？

先让我们来思考一个问题，在函数预处理阶段的时候，JS 解析器会做什么事情 ？

1. 产生一个 LexicalEnvironment (JS 词法环境对象) 。
2. 函数的参数加入  LexicalEnvironment 中。
3. 内部声明式函数加入  LexicalEnvironment 中。
4. 内部 var 变量加入  LexicalEnvironment 中。
5. 冲突情况与全局处理一样。

【注意】：每调用一次，会产生一个 LexicalEnvironment (JS 词法环境对象) 。

• 代码示例 ？

/* 函数预处理阶段
LexicalEnvironment {
	a: 指向函数 a 的引用,
	b: 2,
	f: 指向函数 f 的引用,
}
*/
/*函数执行阶段
LexicalEnvironment {
	a: 指向函数 a 的引用,
	b: 100,
	f: 指向函数 f 的引用
}
*/
function f(a, b){
	alert(a);// function a(){}
	alert(b);// 2
	var b = 100;
	function a(){}
}
f(1, 2);

• 函数执行阶段 ？

同样的来思考一个问题，在函数执行阶段的时候，JS 解析器会做什么事情 ？

1. 给预处理阶段的成员赋值。（一边执行代码，一边修改值）
2. 如果没有用 var 声明的变量，会成为最外部 LexicalEnvironment 的成员。

• 代码示例 ？

/* 函数预处理阶段
LexicalEnvironment {
	f1: 指向函数 f1 的引用,
	f2: 指向函数 f2 的引用
}
*/
/* 函数执行阶段
LexicalEnvironment {
	f1: 指向函数 f1 的引用,
	f2: 指向函数 f2 的引用
}
window {
	b: 100
}
*/
function f1(){
	function f2(){
		b = 100;
        alert(b);// 100
		alert(window.b);// 100
        alert(window.b === b);// true
	}
	f2();
}
f1();