首先来看两个小例子:
- 第一个
test();
function test(){
console.log("能执行吗?")
}
执行结果:
是不是感觉不应该打印出?why?就是因为有预编译的环节。
- 第二个
console.log(a);
var a = "周冬雨";
是不是感觉会报错?为啥没?就是因为预编译环节。
下面我们正式进入预编译讲解,首先声明:预编译发生在函数执行前一刻。
预编译四部曲:
1.创建AO对象(执行期上下文,也就是我们通俗意义上做的作用域);
2.找形参和变量声明,将变量声明和形参作为AO变量的属性名,值为undefined;
3.将实参和形参相统一
4.在函数体里面找函数声明,值赋予函数体
下面直接来第一个例子,按照上面的四部曲就可以说的清清楚楚。
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);
执行fn(1)之前,发生预编译,按照四部曲
- 生成一个AO对象(执行期上下文)
AO={}
- 找形参和变量声明,将变量声明和形参作为AO变量的属性名,值为undefined;
注:这里形参a和变量声明a重复了,显示一个就行了。
AO={
a:undefined;
b:undefined;
}
3.将实参和形参相统一
// 这里实参是1,形参是a,则将a赋值为1,其他不变
AO={
a:1;
b:undefined;
}
- 在函数体里面找函数声明,将整个函数赋予函数体
注:这一步的优先级是最高的,会将之前同名的属性值给覆盖掉。
//函数声明是a和d,4.将整个函数赋予函数体
AO={
a:funcation a (){};
b:undefined;
d:function d(){}
}
至此,整个预编译环节结束,开始执行函数。注:执行时所有的操作都要去AO中找。
console.log(a);
console.log(a);// 从AO中找a,查到是function a(){}.则1.打印出function a(){}
var a =123; //将a设置为123
console.log(a); //2.打印出123
function a (){};// 函数声明已提升,不管
console.log(a);//3.还是打印出123
var b = function (){};//将b赋值为function(){}
console.log(b);//4.打印出function(){}
function d (){
}
我们看一下控制台答案:完全正确
- 第二个例子
function test(a,b){
console.log(a);//1
c =0;
var c ;
a = 3;
b = 2;
console.log(b);//2
function b () {}
function d (){}
console.log(b);//2
}
test(1);
第一步:
AO={ }
第二步:
AO={
a:undefined;//形参
b:undefined;//形参
c:undefined;//变量声明
}
第三步:
AO={
a:1;//实参和形参相统一
b:undefined;//形参
c:undefined;//变量声明
}
第四步:
AO={
a:1;//实参和形参相统一
b:function b () {};//在函数体里面找函数声明,值赋予函数体
c:undefined;//变量声明
d:function d(){};//在函数体里面找函数声明,值赋予函数体
}
以上,函数预编译完成,开始执行函数。
function test(a,b){
console.log(a);//打印1
c =0;//c=0
var c ;
a = 3;//a=3
b = 2;//b=2
console.log(b);//打印2
function b () {}//已经提升,不用管
function d (){}//已经提升,不用管
console.log(b);//打印2
}
test(1);
打印结果如下:
- 第三个例子
function test(a,b){
console.log(a);
console.log(b);
var b = 234;
a = 123;
console.log(a)
function a(){}
var a;
b = 234;
var b = function (){}
console.log(a);
console.log(b);
}
test(1);
第一步及第二步:
AO={
a:undefined//形参
b:undefined//形参
}
第三步:
AO={
a:1//形参和实参相统一
b:undefined//形参
}
第四步:
AO={
a:function a(){}//值赋予函数体
b:undefined//参
}
以上,预编译环节结束,开始执行函数
function test(a,b){
console.log(a);//1打印出function a(){}
console.log(b);/2打印出undefined
var b = 234;//b =234
a = 123;//a=123;
console.log(a)//3打印出123
function a(){}//不管,已提升
var a;//已提升
b = 234;//b =234
var b = function (){}//b =function(){}
console.log(a);//4打印出123
console.log(b);//5打印出function(){}
}
test(1);
打印结果如下: