JavaScript预编译原理

在JS中，遇到 script 标签的话就会进行预解析，将变量 var 和 function 声明提升，但不会执行 function，然后就进入上下文执行，上下文执行还是执行预解析同样操作，直到没有 var 和 function，就开始执行上下文。

变量提升：
指JS标签里的变量声明和函数都会被提到函数的最顶部，在JS中，变量可以先使用后声明。

x = 100;
document.write(x);
var x;

等同与

var x;
x  = 100;
document.write(x);

这两个代码块是一模一样的。

但是，已经初始化的变量不会被提升。

document.write(x);
var x = 100;

这个代码块的运行结果为undefined，因为变量x已经被初始化成100，不会被提升到函数的顶部。

JavaScript运行三步曲：：

1，语法分析：先通篇扫描一遍，检查是否有低级的语法错误，如漏写大括号，写了中文等等。

2，预编译：函数 声明整体提升，变量 声明提升。而且，预编译发生在函数运行的前一刻。

a,函数声明整体提升：
无论写在哪里，在哪里调用，系统总会把函数提到逻辑的最前面。

<script>
	test();
	
	function test(){
		console.log("abc");
	}
</script>

b,变量声明提升：

变量 声明提升，比如 var a = 123；这个被拆分为 （var a； a = 123；） 系统会把变量声明提到最前面，也就是说把var a；提到了最前面。

document.write(x);
var x = 100;

上面这个代码块在进行提升后等同于：

var x;
document.write(x);
x = 100;

运行结果为undefined，这个例子可以用来解释上面提到的为什么已经初始化的变量不能进行提升。

在进行预编译，也会分为四个步骤：
1，创建AO对象（activation object，也叫做执行期上下文)

AO{
	formal parameter： undefined,
	...
	...
}	

这里我们借用一个例子来更好的解释。

1    function jsFun6(){  //函数声明和函数表达式的区别
2        
3        test1();//函数声明提升，在执行代码之前会先读取函数声明，不会报错
4        function test1(){//函数声明方式创建函数
5            alert("测试1");
6        }
7        
8        //test2();报错，函数还不存在
9        console.log(test2)//不会报错，变量提升只是提升变量的声明，并不会把赋值也提升上来，输出undefined
10        var test2=function(){
11            alert("测试2");
12        };//使用函数表达式创建一个匿名函数(实际是以变量test3命名的函数)
13        test2();//不会报错，以创建函数
14                    
15        var test3=function(){
16            alert("测试3");
17        }();//加了括号立即执行
18        
19        var test4 = 12;// ！注意看，一旦变量被赋值后，将会输出变量
20        //函数提升优先级高于变量提升，所以函数先提升，然后变量提升覆盖之前的函数声明，表                
21        //现为变量
22        function test4() {
23            alert("测试4");               
24        }
25        console.log(test4); //12
26    
27        var test5="test5_1";
28        (function(){
29            //js中的变量搜索顺序：找变量时，先找局部变量，如果没有局部变量；再找全局变量。
30        alert(test5);//此时的test5为局部变量的提升，undefined
31        var test5="test5_2";
32        })();
33                    
34    }
35    jsFun6();

找函数形参和变量声明，然后把形参和变量声明的名作为AO里面的属性名，值为undefined,
所以在进行创建AO对象时，第10，15，19，27的参数名会作为AO对象的属性名，属性值为undefined。所以AO对象就会变成下面这样：

AO{
	test2: undefined,
	test3: undefined,
	test4: undefined,
	test5: undefined,
}

然后会将实参的值传到AO对象里，替代相对于的undefined值。
然后再找到函数声明作为AO属性名，第4，22行的function test1(){}; function test4(){};，放到相对于的位置。
所以AO对象则变成下面这样：

AO{
 test2: undefined,
 test3: undefined,
 test4: function test4(){},
 test5: undefined,
 test1: function test1(){},
}

这里需要注意因为之前 AO 对象里已经有 test4 属性了所以 AO 对象里原来由变量声明时得到的 test4 属性会被现在函数声明的 test4 覆盖。

到这里预编译就完成了开始执行。

执行时会先去查找 AO 对象，如果没找到就会去全局对象GO(Global Object)对象里查找(AO 对象相当于局部变量，GO 对象相当于全局变量)。

当执行第 3 行时在 AO 里找到 test1 执行，弹出提示框显示提示信息“测试1”。

第 4 行已经提升了所以可以略过，下面其他的类似行与此相同。

执行第 8 行时, 在 AO 里找到 test2，并作为函数运行，由于 AO 里的 test2 的值是 undefined 所以执行会报错。

第 9 行输出 test2 所以输出的是 undefined。

AO对象也变成了：

AO{
    test2：function(){alert("测试2");},
    test3：undefined,
    test4：function test4(){alert("测试4");},
    test5：undefined,
    test1：function test1(){alert("测试1");}
}

所以第 13 行执行时在 AO 里能找到 test2 并作为函数运行，弹出提示框显示提示信息“测试2”。

第 15 行由于用于赋值的函数体后面加了 () 变成立即执行函数所以函数会立即运行（这里会弹出提示框显示提示信息“测试3”）然后将返回值赋值给 test3，由于函数没有返回值所以是 undefined，也就导致了 AO 里的 test3 的属性值还是 undefined（大家可以在第18行输出一下 test3，会发现还是输出 undefined）。

第 19 行将 12 赋值给 test4，将原来 test4 的属性值覆盖了，AO 对象变为：

AO{
    test2：function(){alert("测试2");},
    test3：undefined,
    test4：12,
    test5：undefined,
    test1：function test1(){alert("测试1");},
}

所以在第 25 行会输出 12（如果在这里再把 test4 作为函数去运行就会报错）。

第 27 行将 test5_1 赋值给 test5。

第 28 行是立即执行函数，会立即执行。

在执行之前会进行预编译所以这个函数又会创建一个 属于他自己的 AO 对象，为了区分我们将他标识为 AO2。

AO2{

}

然后将形参和变量声明作为AO对象的属性名，属性值为undefined。

AO2{
    test5：undefined
}

然后将实参形参相统一，以及函数声明提升。
执行到第30行时在AO2中找到了test5，属性值为undefined，
执行到31行时将test5_2赋值给test5，所以AO2变成了：

AO{
    test5 ：test5_2
}