将js预编译熟稔于心

首先来看两个小例子：

• 第一个

  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)之前，发生预编译，按照四部曲

1. 生成一个AO对象（执行期上下文）

AO={}

2. 找形参和变量声明，将变量声明和形参作为AO变量的属性名，值为undefined;
   注：这里形参a和变量声明a重复了，显示一个就行了。

AO={
	a:undefined;
	b:undefined;
}

3.将实参和形参相统一

// 这里实参是1，形参是a，则将a赋值为1，其他不变
AO={
	a:1;
	b:undefined;
}

4. 在函数体里面找函数声明，将整个函数赋予函数体
   注：这一步的优先级是最高的，会将之前同名的属性值给覆盖掉。

//函数声明是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);

打印结果如下：