JavaScript的预编译（js代码的实际执行过程）

疑惑：为什么有时候变量没有声明，不会报错？

           为什么先调用函数，后创建函数，也能正常调用函数？

下面讲解一下js代码的预编译，即js代码的实际执行顺序/过程。

前言：

           1.函数声明整体提升

           2.变量 声明提升 

1.函数声明整体提升:
a();
function a(){}
//会将function a(){} 提升到最上面，再执行a()
//可以将上面的代码执行顺序理解为：
function a(){}
a();

2.变量   声明提升 ：
console.log(a);
var a = 123;   //这里意思是 声明了变量a,并且给a赋值了123
//会将 (a的声明)提升到最上面
//可以将上面的代码执行顺序理解为：
var a;         //声明变量a
console.log(a); 
a = 123;       //给变量a赋值123

四部曲：

               1. 创建AO对象
               2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
               3. 将实参值和形参值统一
               4. 在函数体里面找函数声明，值赋予函数体

​    例子：

代码：
function fn(a){
    console.log("第一个a："+a)
    var a = 123;
    console.log("第二个a："+a)
    function a(){}
    console.log("第三个a："+a)
    var b = function(){}
    console.log(b)
    function d(){}
    console.log(d)
}
fn(1);
//预编译发生在函数执行的前一刻

思路：
1.创建AO对象：
    AO{    
    }
2.找形参和变量声明
	function fn(a)       ：这里的a是形参-------------------------得到a
    var a = 123;         ：这里的a是变量声明----------------------得到a
    var b = function(){} ：这里的b是变量声明，只不过是声明了一个函数-- 得到b
3.将变量和形参名作为AO属性名，值为undefined
	因为有两个a,所有只写一个
	AO{
        a:undefined,
        b:undefined
    }
4.将实参值和形参值统一（意思是将实参的值传到形参里面）
	fn(1)   		：这里的1是实参
    function fn(a)  ：这里的a是形参
    AO{
        a:1,
        b:undefined
    }
5.在函数体里面找函数声明，值赋予函数体
	function a(){} 和 function d(){} 是函数声明
    则预编译最后的结果为：
    AO{
        a:function a(){},
        b:undefined ,
        d:function d(){}
    }
6.开始执行函数
	console.log("第一个a："+a)   ：这里的a就是现在AO里面a的值，则输出-->第一个a：function a(){}
	var a = 123;               ：这里的var 声明其实已经不存在，《变量声明提升》已经将a提前声明了；这里的只是将123赋值给了a，则a的值为123
    console.log("第二个a："+a)   ：这里输出-->第二个a：123
    function a(){}			   ：这里的a函数声明也已经提升了，所以这里不用管
    console.log("第三个a："+a)   ：这里输出-->第三个a：123
    var b = function(){}       ：这里将function(){} 赋值给了b，则b的值为function(){}
	console.log(b)             : 这里输出-->function(){}
	function d(){}			   ：这里的d函数声明也已经提升了，所以这里不用管
    console.log(d)			   ：这里拿到AO里面d的值，则输出-->function d(){}

最终输出：
	第一个a：function a(){}
	第二个a：123
    第三个a：123
    function(){}
	function d(){}