预编译
- 全局预编译(GO)
- 局部预编译(AO)
- GO+AO例题
js运行有三个步骤:1、语法分析;2、预编译;3、解释执行
预编译有两种:一、全局预编译;二、局部预编译。
也正是因为有预编译,导致了js中存在变量提升(不包括赋值)和函数声明整体提升。
全局预编译(GO)
全局预编译是在页面加载完成时执行,主要包括以下三个步骤:
1、创建GO对象(Global Object)全局对象。
2、找变量声明,将变量名作为GO属性名,值为undefined。
3、查找函数声明,作为GO属性,值赋予函数体。
GO例题:
console.log(a);
a = 100;
function a() { };
console.log(a);
var a;
题解:
1、创建GO对象(Global Object)全局对象。
//创建GO对象(Global Object)全局对象。
GO{}
2、找变量声明,将变量名作为GO属性名,值为undefined。
//找变量声明,将变量名作为GO属性名,值为undefined
GO{
a:undefined, //只有var a 这个变量声明
}
3、查找函数声明,作为GO属性,值赋予函数体。
//查找函数声明,作为GO属性,值赋予函数体
GO{
a:function a() { },//函数声明将变量a替换掉了
}
//题解:
console.log(a);//function a() { }:预编译
a = 100;
function a() { };
console.log(a);//100:因为a = 100进行赋值
var a;
局部预编译(AO)
局部预编译是在函数执行前一刻执行的,主要包括以下四个步骤:
1、创建AO对象(Activation Object),也叫执行期上下文。
2、找形参和实参声明,将形参和实参名作为AO对象的属性,值为undefined。
3、将实参值和形参统一
4、在函数体里面找到函数声明,赋值予函数体
AO例题:
//例题:
function fn(a){
console.log(a);
var a = 123;
console.log(a);
function a(){}
console.log(a);
var b = function(){}
console.log(b);
function d(){}
}
fn(1);
题解:
1、创建AO对象
//创建AO对象
AO{}
2、找形参和实参声明,将形参和实参名作为AO对象的属性,值为undefined。
//找形参和实参声明,将形参和实参名作为AO对象的属性,值为undefined。
/*
形参:a
实参:a、b
*/
AO{
a:undefined,
b:undefined
}
3、将实参值和形参统一
//将实参值和形参统一
AO{
a:1,
b:undefined
}
4、在函数体里面找到函数声明,赋值予函数体
//在函数体里面找到函数声明,赋值予函数体
/*
函数声明:function a(){}、function d(){}
*/
AO{
a:function a(){},
b:undefined,
d:function d(){}
}
局部预编译完成!!
//题解:函数是在预编译完成后执行的
function fn(a){
console.log(a);//function a(){}
var a = 123;
console.log(a);//123:a重新进行了赋值
function a(){}
console.log(a);//123:function a(){}在预编译的时候已经提前,这里没有重新赋值
var b = function(){}
console.log(b);//function(){}:在预编译中b的值为undefined,但是在上一行进行了赋值
function d(){}
}
fn(1);
GO+AO例题
console.log(test);
console.log(a)
a = 100;//相当于定义了window.a;
function test(a) {
console.log(a);
function a() { }
console.log(a);
var a = 300;
}
test(a);
题解:
首先看GO
1、创建GO对象
GO{}
2、找变量声明,将变量名作为GO属性名,值为undefined。(本题没有声明变量)
GO{}
3、查找函数声明,作为GO属性,值赋予函数体。
GO{
test:function test(a) {
console.log(a);
function a() { }
console.log(a);
var a = 300;
}
}
GO预编译完成!!!
//全局解释执行后的结果
console.log(test);//function test(a) { console.log(a); var a = 200; console.log(a); var a = 300;}
console.log(a);//Uncaught ReferenceError: a is not defined(要执行test函数,后面讲AO的时候要删掉此行)
a = 100;//相当于定义了一个window.a;
function test(a) {
console.log(a);
function a() { }
console.log(a);
var a = 300;
}
test(a);
然后看AO
1、创建AO对象
AO{}
2、找形参和实参声明,将形参和实参名作为AO对象的属性,值为undefined。
AO{
a:undefined
}
3、将实参值和形参统一
AO{
a:100
}
4、在函数体里面找到函数声明,赋值予函数体
AO{
a:function a() { }
}
局部编译完成!!!
//局部解释执行后的结果
console.log(test);//function test(a) { console.log(a); var a = 200; console.log(a); var a = 300;}
//console.log(a);//Uncaught ReferenceError: a is not defined(要执行test函数,后面讲AO的时候要删掉此行)
a = 100;//相当于定义了一个window.a;
function test(a) {
console.log(a);//function a() { }
function a() { }
console.log(a);//function a() { }
var a = 300;
}
test(a);