JS函数预编译解析-优快云博客

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

JS代码执行步骤

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

2预编译

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

预编译过程

案例一：

 function fn(a,b){
    console.log(a);
    var a = 99;
    console.log(a);
    
    function a(){};
    console.log(a);
    
    var b = function(){};
    console.log(b);
    
    function c(){};
 }
 
 fn(6);

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 fn(a,b){
 
    console.log(a);//此时输出的是 function a(){};
    var a = 99;//重新对a赋值
    console.log(a);//因此此时输出为99
    
    function a(){};//预编译环节已经提出，故执行时不在看这行代码
    console.log(a);//因此此时输出为99
    
    var b = function(){};//此步骤是把function(){};赋给b
    console.log(b);//输出function(){}
    function c(){};
    
 }
 fn(6);

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

				}
				f3();
			}
			f2();
		}		
		f1();

预编译导图