JavaScript函数的预编译过程

浅浅的花香味﹌ 2022-02-13 11:21 256阅读 0赞

### JavaScript函数的预编译过程 ###

*  前言
 *   *  什么是函数的预编译？为什么要学习函数的预编译？
     *  函数预编译发生的时间
     *  函数预编译发生的过程
     *  函数fn(1)的预编译过程
     *  最后，我只想说，即使你学过很多框架、做过很多项目，如果你连最基础的js、css都记不清楚，那么，在面试中，面试官对你的能力也会提出质疑！！！
     *  夯实基础，厚积薄发！

# 前言 #

最近刚面了一家公司的前端，本来觉得自己技术还不错，结果面完才发现，以前学过的基础知识都忘了差不多了。真是大写的尴尬！！！以前学习的时候，总觉得能记住，现在才发现写博客的重要性。本着不服输的态度，从哪里跌倒就从哪里站起来，那么从原声js开始吧！

## 什么是函数的预编译？为什么要学习函数的预编译？ ##

咱们思考一下这个函数的执行结果

// 这个函数的执行结果是什么？？
    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)的执行过程，那么就要仔细研究一下函数预编译的过程**  
那么，开始正文！！！

## 函数预编译发生的时间 ##

在函数执行的前一刻，JavaScript就完成了预编译的整个过程。

## 函数预编译发生的过程 ##

1.  **创建AO (Activation Object)对象 ，也就是执行期上下文**；
2.  **找形参和变量声明，将形参和变量声明作为AO的属性** ；
3.  **将实参与形参相统一，就是将实参赋值给形参** ；
4.  **在函数体中找到函数声明，并将其作为AO的属性** ；
5.  **执行函数** ；

是不是有点绕，有点晕？。？  
那么，咱们对照着上面的函数仔细分析一下啊

## 函数fn(1)的预编译过程 ##

1.  **创建AO (Activation Object)对象 ，也就是执行期上下文**；

// 这个函数的执行结果是什么？？
    AO{ 
    	//这是一个AO对象；
    }

1.  **找形参和变量声明，将形参和变量声明(只是变量声明，不包括变量赋值，变量赋值在函数执行时执行)作为AO的属性** ；

// 这个函数的执行结果是什么？？
    AO{ 
    	a:undefined //这是形参，也是变量声明
    	b:undefined //这是变量声明
    }

1.  **将实参与形参相统一，就是将实参赋值给形参** ；

// 这个函数的执行结果是什么？？
    AO{ 
    	a:1         //将实参1赋值给形参
    	b:undefined //这是变量声明
    }

1.  **在函数体中找到函数声明，并将其作为AO的属性** ；

// 这个函数的执行结果是什么？？
    AO{ 
    	a:function a(){ }; //找到函数声明a，并将其作为AO的属性
    	b:function(){ } ；   //找到函数声明b，并将其作为AO的属性
    	d:function d(){ } ；//找到函数声明d，并将其作为AO的属性
    }

1.  **执行函数** ；

// 这个函数的执行结果是什么？？
    function fn(a){ 
       console.log(a);  //第一步，打印a,在AO对象中找到a，也就是function a(){};
       var a =123;      //第二步，将123赋值给a，此时，a=123
       console.log(a); //所以这一步的执行结果是123
       function a(){ }; //这一步已经在预编译中执行了，所以此时忽略
       console.log(a); //所以这一步的执行结果还是123
       var b = function(){ };//这一步已经在预编译中执行了，所以此时忽略
       console.log(b);  //此时找到AO中的b，也就是function(){}
       function d(){ } ；//这一步已经在预编译中执行了，所以此时忽略
    }
    fn(1);
    所以执行结果是：
    function a(){ };
    123;
    123;
    function(){ };

## 最后，我只想说，即使你学过很多框架、做过很多项目，如果你连最基础的js、css都记不清楚，那么，在面试中，面试官对你的能力也会提出质疑！！！ ##

## 夯实基础，厚积薄发！ ##

这篇文章是学习自渡一教育的一位老师的视频，感谢了。。。