预编译
- 一、概念
- 1、什么是预编译
- 2、全局对象GO
- 3、活动对象AO
- 二、全局预编译
- 1、流程
- 2、看一个例子
- 三、函数预编译
- 1、流程
- 2、示例
- 示例一
- 示例二
- 示例三
一、概念
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:
- 查找变量的声明,无变量声明
- 查找函数的声明,将函数a作为window对象的属性名,值为function。
2、全局预编译结束,执行代码,1-7行为函数声明,会被略过,直接执行第8行,调用函数a,产生函数a的AO对象
3、函数a的AO环境:
- 查找形参test,局部变量i作为AO对象的属性名,值为undefined
- 查找实参覆盖形参,实参1赋值给test,test值为1,i的值仍为undefined
- 查找局部函数b,b作为AO对象的属性名,值为function
4、函数的预编译结束,执行函数
- 执行以后 i 的值为0(第二行);
- 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);
结果: