js函数预编译的具体步骤，很详细

预编译的四个步骤

预编译四步曲
1、创建AO对象（Activation Object）（执行期上下文：函数产生的存储空间库）
2、找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
3、将实参值和形参统一
4、在函数体里面找函数声明，值赋予函数体

这里有个小细节：函数声明与函数表达式区别：

function a(){}   //这是函数声明

var a=function a(){}  //这是函数表达式

具体的过程是这样：

//不同地方的 console.log(a); 输出结果是什么？
function fn(a){
   console.log(a); //在AO里找值--->输出 function a() {}
   var a = 123; //预编译将 var a;提升上去了，执行 a = 123;修改AO中a的值
   console.log(a); //输出 123
   function a() {} //预编译读过，不再读
   console.log(a); //输出 123
   var b = function() {} //将函数表达式赋给AO中的b，b的值改为function () {}
   console.log(b); //输出funtion () {}
   function d() {}//AO中已读不再读
}
fn(1);
//预编译发生在函数执行的前一刻；预编译也发生在全局，第一步为创建GO对象；
GO（Global Object） === window

执行结果为：

第一步：创建AO对象：我们隐式的在函数中创建了一个AO的对象来盛放函数中的变量，此时对象中并没有值；
第二步：找形参和变量声明，将变量和形参名作为AO属性名，重复的只写一个即可，值为undefined；

第三步：将实参值和形参统一，实参1传给a，更改a的值为1   

第四步：在函数体里面找函数声明，值赋予函数体，这里函数声明有function a() {} 、  function d() {}，注意：  var b = function() {}是函数表达式，不是函数声明。

最后：在进行完预编译后此时若执行函数则会以AO为基础对函数中的变量进行赋值,预编译读过的语句，就不用再次读，执行的时候直接从AO里取值。读取赋值语句，配合AO完成赋值过程。

想了一下，还是追加几个练习比较妥当~

练习一：

 function test(a,b) {
              console.log(a);   //1
              c = 0;     //将c=0赋给AO中的c     
              var c ;
              a = 3 ;    //将a=3赋给AO中的a
              b = 2 ;    //将b=2赋给AO中的b
              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:b(){ }
	        c:undefined
	        d:d(){ }
          }

执行结果为：

 

2.练习二：

  function test(a,b){
                 console.log(a); // function a(){}  
                 console.log(b); //undefined 
                 var b =234;  //将b=234赋给AO中的b
                 console.log(b);  //234
                 a=123;         //将a=123赋给AO中的a  
                 console.log(a);  //123
                 function a(){}  //预编译已读不再读
                 var a;
                 b=234;          //将b=234赋给AO中的b
                 var b = function(){}//将函数表达式赋给AO中的b
                 console.log(a);  //123
                 console.log(b);  //function(){}
              }
  test(1);

预编译过程：

第一步：AO{}
第二步：AO{
	a:undefined
	b:undefined
}
第三步：AO{
	a:1
	b:undefined
}
第四步：AO{
	a:function a(){}  
	b:undefined
}

 执行结果：

练习到这里，大家肯定对js函数预编译过程比较清楚了，希望我的分析能够帮助到大家，欢迎大家指正。

 

 

 

本文地址：https://blog.csdn.net/weixin_44164982/article/details/107314659