深入了解JavaScript从预编译到解析执行的过程
2020-03-22 本文已影响0人
越前君
先来一个最简单的案例。
var a = 1;
从字面上看,这就是简单的将 1
赋值给变量 a
。可在 JS 引擎里面,它认为这是两个步骤:var a
和 a = 1
,分别是声明和赋值,它们发生在两个不同的阶段。
写这篇文章的原因是看到一道题,发现自己对预编译的理解出现了偏差。加上以往也没整理过,久了不接触就会慢慢遗忘、凌乱,所以借此机会整理下预编译的知识点,同时希望这篇文章能帮助屏幕前的你。
一、JS 从加载到执行完经历了什么?
- 页面产生便创建了一个 GO 全局对象(Global Object,全局上下文),即 window 对象。
- 第一个脚本文件加载。(加载完成后,接着是 JS 运行三部曲)
1). 语法分析
2). 预编译
3). 解析执行 - 三部曲第一步:语法分析,检查是否合法。
- 三部曲第二步:开始预编译:
(其实这里还有创建了 document、navigator、screen 等属性,此处忽略)
1). 查找变量声明,作为 GO 属性,并赋予 undefined;
2). 查找函数声明,作为 GO 属性,并赋予函数体本身(若函数与变量同名,函数会覆盖变量;若多个函数声明是同名,后面的会覆盖前面的) - 三部曲第三步:开始执行代码。
- 执行完一个 script 块,到下一个 script 块,会重复 2、3、4、5 步骤。
<script>
console.log(a); // function a() {}
console.log(b); // function b() {}
console.log(c); // undefined
var a = 1;
function a() {};
function b() {};
var c = 3;
console.log(a); // 1
console.log(d); // Uncaught ReferenceError: d is not defined,且从这里开始代码终止执行
d = 4;
console.log(d);
/**
(有必要说明一下:下面的 GO 是伪代码,为了助于理解罢了)
1. 创建 GO 对象;GO {}
2. 加载 script 块
3. 语法分析
4. 开始预编译
1). 找到变量声明 a 和 c,放到 GO {a: undefined, c: undefined}
2). 找到函数声明 a 和 b,因为函数 a 和 变量 a 同名,所以函数覆盖掉变量:GO {a: f(), b: f(), c: undefined}
5. 执行代码
1). 执行到 console.log(a),然后从 GO 里面找到 a,所以打印出来是函数;
2). 继续往下执行,同理打印 b 也是函数;
3). 同理,c 打印结果是 undefined;
4). 因为 a 赋值 1,所以第二个 console.log(a) 会打印 1;
5). 到了 console.log(d) 这一步,因为暗示全局变量 (imply global variable),不参与预编译的过程,所以会报引用错误;(代码终止执行,不会继续往下走)
*/
</script>
JavaScript 不是全文编译完再执行,而是块编译,即一个 script 块中预编译然后执行,再按顺序预编译下一个 script 块再执行。但是此时上一个 script 块中的数据都是可用的,而下一个 script 块中的函数和变量则是不可用的。
二、解析执行阶段,当遇到函数执行的时候,会产生 AO 活跃对象(Activation Object,活跃上下文),那过程又是怎样的呢?
首先要明确一点,预编译不仅仅发生在 script 代码块执行之前,还发生在函数执行之前。
函数执行之前的“预编译”的过程:
- 创建 AO 对象
- 查找形参和变量声明,并赋予 undefined;
- 实参值赋给形参;
- 查找函数声明,赋予函数本身;
预编译完了之后,接着是执行函数。(下面举例说明下这个过程)
<script>
function fn(a) {
console.log(a); // 123
console.log(b); // undefined
console.log(c); // function c() {}
var a = 1;
var b = function() {}; // 注意:函数表达式,其实就是将一个匿名函数赋值给变量 b
function c() {};
console.log(a); // 1
console.log(b); // function() {}
}
fn(123);
/**
有必要说明一下:下面的 AO 是伪代码,为了助于理解罢了
1. 创建 AO 对象;AO {}
2. 预编译
(还包括 arguments 等,此处忽略)
1). 查找形参和变量声明 a、b 和 c,放到 AO {a: undefined, b: undefined}
2). 实参赋值给形参:AO {a: 123, b: undefined}
3). 找到函数声明 c,AO {a: 123, b: undefined, c: f()}
3. 执行代码
1). 执行到 console.log(a),然后从 AO 里面找到 a,所以打印出来是 123;
2). 继续往下执行,打印 b 是 undefined;
3). 继续往下,a 赋值 1;b 赋值一个匿名函数;
4). 第二个 console.log(a) 会打印 1;
5). 第二个 console.log(b) 会打印 function;
*/
</script>
三、其他
其实 GO 和 AO 就差在形参和实参这俩个东西。这也是我们常说的“提升” (Hoisting)。
其实这些蛋疼的情况,几乎只会出现在“面试”上,在实际的项目中几乎很少出现。如果在多人共同维护项目中,估计早被打死了。因为可读性差而且维护成本高。
在 ES6 中,新增的 let、const、class 特性就不会存在提升的问题,声明变量,必须要在调用之前发生,否则就会报错。这应该也是一个信号,减少那些蛋疼的情况。
但是无论是为了对付面试,还是为了了解 JavaScript 内部运行的原理,作为前端开发的一员,我们都应该要弄清楚。