JS预编译过程

目录

JS运行过程

JS预编译过程（在函数执行的前一刻进行）

eg1:

1、预编译

2、预编译结束之后解释执行

eg2:

1、预编译

2、预编译结束之后解释执行

---

JS运行过程

1. 语法分析
2. 预编译
3. 解释执行

JS预编译过程（在函数执行的前一刻进行）

1. 创建一个执行期上下文AO
2. 找形参和变量声名,将变量名和形参作为AO的属性，并赋值为undefined
3. 将实参与形参相统一
4. 在函数体内找函数声明（匿名函数和函数表达式不参与），值赋予函数体(不考虑函数体内有什么东西)

eg1:

function a(a) {
				var a = 123;     
				function a() {}
				var b = function() {}
				function d() {}
			}
fn(1);

1、预编译

• 第一步：创建AO：AO{}
• 第二步：找形参和变量声明，赋值为undefined .  AO{ a: undefined, b: undefined}
• 第三步：形参实参相统一 . AO{ a: 1, b: undefined }
• 第四不：找函数声明. AO{a: function a(){ }, b: undefined, d: function d(){ }}

2、预编译结束之后解释执行

• 第1行：执行 a = 123:AO{a: 123, b: undefined, d: function d(){ }}
• 第2行：已预编译
• 第3行：执行 b = function(){ }: AO{a: 123, b: function (){}, d: function d(){ }}
• 第4行：已预编译

eg2:

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);

1、预编译

• 第一步：创建 AO 对象: AO{ }
• 第二步：找形参和变量声明 AO{ a：undefined, b：undefined }
• 第三步：将实参值与形参统一。AO{a: 1, b：undefined }
• 第四步：找函数声明，值赋予函数体(第 6 行是函数表达式，不是函数声明)AO{ a：function a(){}, b：undefined, d：function d(){} }

2、预编译结束之后解释执行

• 第 1 行：输出 a，去 AO 对象里找 a所以第 1 行输出：function a(){}
• 第 2 行：a=123 ，执行后 a 的 值改为 123： AO{ a：123, b：undefined, d：function d(){} }
• 第 3 行：输出 a，去 AO 对象里找，输出 123.
• 第 4 行：已预编译
• 第 5 行：输出 a ， 输出123
• 第 6 行：执行 b = function(){} : AO{ a：123, b：function(){}, d：function d(){} }
• 第 7 行：输出 b 得  function(){}
• 第 8 行：已预编译

    最后输出的结果 ：