函数预编译过程和案例分析

妖狐艹你老母 2023-06-12 09:24 64阅读 0赞

# 函数预编译过程和案例分析 #

## JS代码执行步骤 ##

**1语法分析（即通篇扫描所有代码）如果有明显的语法错误 直接报错，不执行所有的代码**

**2预编译**

**3解释执行(边解释边执行)**

## 预编译过程 ##

**案例一：**

**1创建AO对象，执行期上下文（后面更新关于执行期上下文详解）。**

AO{
    }

**2寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值设定为undefined.**

AO{
    	a:undefined
    	b:undefined
    }

**3将形参和实参相统一，即更改形参后的undefined为具体的形参值。**

AO{
    	a:6
    	b:undefined
    }

**4寻找函数中的函数声明，将函数名作为AO属性名，值为函数体。**

AO{
    	a: function a(){};
    	b:undefined
    	c: function c(){};
    }

**预编译结束，开始执行代码**

**升级案例 ：**
    function f1(){
    			function f2 (){
    				function f3 (){
    
    				}
    				f3();
    			}
    			f2();
    		}		
    		f1();

预编译导图  
![预编译导图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenlfY29t_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenlfY29t_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191112100807753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenlfY29t,size_16,color_FFFFFF,t_70