Js中的预编译

什么是预编译？

　　　　引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。

1.预编译什么时候发生

　　预编译分为全局预编译和局部预编译，全局预编译发生在页面加载完成时执行，而局部预编译发生在函数执行的前一刻。

　　预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译 。只有在解释执行阶段才会进行变量初始化 。

　　目的：定义作用域中的初始化词法环境、减少运行时报错

2.预编译前奏

　　一切声明的全局变量和未经声明的变量，全归window所有。　

　　下面这个函数里面只有一个连等的操作，赋值操作都是自右向左的，而b是未经声明的变量，所以它是归window的，我们可以直接使用window.b去使用它。

function test(){
	// 这里的b是未经声明的变量，所以是归window所有的。
	var a = b = 110;
        console.log(a,b);
}
test();
console.log(a,b);//报错

3.预编译步骤　

　　首先JavaScript的执行过程会先扫描一下整体语法语句，如果存在逻辑错误或者语法错误，那么直接报错，程序停止执行，没有错误的话，开始从上到下解释一行执行一行。

 　1.全局编译的步骤

• 生成GO对象 GO｛｝(global object) 这个GO就是window
• 将全局的变量声明（的名）储存一GO对象中，value为undefinde
• 将全局的函数声明的函数名作为go对象中的key,函数整体内容为value储存到go对象中

 　2.局部编译的步骤　　　　

• 执行前的一瞬间，会生成一个AO（action object）对象
• 到函数体作用域里找形参和变量声明，将形参和变量声明作为AO对象的属性名，值为undefined
• 将实参和形参统一
• 分析函数声明，函数名作为AO对象的属性名，值为函数体，如果遇到同名的，直接覆盖  

关于GO对象的例子：

全局预编译：在逐行执行；语法检测之前

　　 var a;
    function fun(){

    }
    function abc(){

    }
    function a(){

    }
    console.log(a);
    var a = 100;
    console.log(a);

　　1. 会生成一个对象（GO），这个对象封装的就是作用域，称为GO（global object）。当全部挂载完成之后，然后代码在去逐行执行

GO{

}

　　2. 分析变量声明（var）——变量作为GO对象的属性名，值为undefined

GO{
    a：undefined
}

　　3. 分析函数声明（function）——函数名作为GO对象的属性名，值为函数体（如果遇到同名，直接覆盖）

GO={
  a:undefined;function a(){}，
  fun：function fun(){}，
  abc:function abc(){}                                                                                                                       
}

　　4. 当走到某一行的时候；a产生了一次赋值；此时GO对象变成了：

 GO={
      a:100,
      fun:function fun(){}
      abc:function abc(){};                      
}

　　5. 逐行执行（看着GO对象里面的执行）

输出结果：ƒ a() {}   	100	

关于AO对象的例子：

　　概念：函数在每次运行时会重新创建函数内所有定义的变量,函数其实也是一种变量，因为它是变量名指向一个函数方法，所有的变量创建后加入到自身AO对象中，然后将在scope属性中加入自身AO对象。

　　什么是AO：
　　　　是函数执行前的一瞬间，生成一个AO对象（在函数执行前的一瞬间会生成自己的AO，如果函数执行2次，生成了两次AO，这两次的AO是没有任何关联）

function fn(a) {
    console.log(a);//1(第一个 console.log())
    var a = 123;
    console.log(a);//2
    function a() {}
    console.log(a);//3
    var b = function() {}//函数表达式
    console.log(b);//4
    function d() {}
    var d = a;
    console.log(d);//5
  }
  
  fn(1);
  
//输出结果：
[Function: a]
123
123
[Function: b]
123

　　1. 创建AO对象

AO{

}

　　2. 到函数体作用域里找形参和变量声明，将形参和变量声明作为AO对象的属性名，值为undefined

AO{
 a:undefined;
 b:undefined;
 d:undefined;
}

　　3. 将实参和形参统一

AO{
 a:undefined; 1;
 b:undefined;
 d:undefined;
}

4. 在函数体里找函数声明，将函数名作为AO对象的属性名，值赋予函数体

AO{
 a:undefined; 1; function (){ } 
   b:undefined;
 d:undefined; function() { }
}

　　逐行执行（看着AO对象里面的执行）

第一个console.log:此时函数的执行环境内的变量为

AO{
 a:undefined; 1; function (){ }
 b:undefined;
 d:undefined; function() { }
}

第二、三、四、五个console.log:此时函数的执行环境内的变量为

AO{
 a:undefined; 1; function (){ }; 123；
 b:undefined;
 d:undefined; function() { }
}

　　解释：当函数调用时，创建函数执行上下文，然后根据实参填充arguments对象，即：形参var a = arguments[0]，然后根据函数内的函数声明将函数名a进行提升，此时会发现函数名和形参名发生了冲突，由于形参与arguments中的数据共享状态，所以接下来后提升的函数名a内存放的函数引用地址会将前面定义的形参名a指向的arguments[0]直接覆盖掉

　　函数执行完毕，销毁AO对象。

在预编译这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后在进行接下来的处理，下面通过示例看下变量提升和函数提升

变量的提升：

示例1：

function hoistVariable() {
    if (!foo) {
        var foo = 5;
    }

    console.log(foo); // 5
}
hoistVariable();

　　预编译之后

function hoistVariable() {
    var foo;

    if (!foo) {
        foo = 5;
    }

    console.log(foo); // 5
}

hoistVariable();

　　引擎将变量声明提升到了函数顶部，初始值为undefined，自然，if语句块就会被执行，foo变量赋值为5

示例2：

var foo = 3;

function hoistVariable() {
    var foo = foo || 5;

    console.log(foo); // 5
}

hoistVariable();

　　foo || 5这个表达式的结果是5而不是3，虽然外层作用域有个foo变量，但函数内是不会去引用的　　

　　预编译之后：

var foo = 3;

function hoistVariable() {
    var foo;

    foo = foo || 5;

    console.log(foo); // 5
}

hoistVariable();

函数的提升：

示例1：

function hoistFunction() {
    foo(); // 2

    var foo = function() {
        console.log(1);
    };

    foo(); // 1

    function foo() {
        console.log(2);
    }

    foo(); // 1
}

hoistFunction();

　　第一次调用时实际执行了下面定义的函数声明，然后第二次调用时，由于前面的函数表达式与之前的函数声明同名，故将其覆盖，以后的调用也将会打印同样的结果　　

　　预编译之后

function hoistFunction() {
    var foo;

    foo = function foo() {
        console.log(2);
    }

    foo(); // 2

    foo = function() {
        console.log(1);
    };

    foo(); // 1

    foo(); // 1
}

hoistFunction();　

示例2：

var foo = 3;

function hoistFunction() {
    console.log(foo); // function foo() {}

    foo = 5;
    
    console.log(foo); // 5

    function foo() {}
}

hoistFunction();
console.log(foo);     // 3

　　可以看到，函数声明被提升至作用域最顶端，然后被赋值为5，而外层的变量并没有被覆盖　　

　　预编译之后：

var foo = 3;

function hoistFunction() {
   var foo;

   foo = function foo() {};

   console.log(foo); // function foo() {}
   
   foo = 5;

   console.log(foo); // 5
}

hoistFunction();
console.log(foo);    // 3

　　函数的优先权是最高的，它永远被提升至作用域最顶部，然后才是函数表达式和变量按顺序执行