JavaScript 预编译到底做了什么？

预编译发生在什么时候

预编译发生在函数执行的前一刻

一. 预编译的抽象理解

函数声明整体提升

变量，声明提升

举个例子

这里控制台能正常输出就是因为在预编译时，会将函数的声明整体（整个代码块）和变量的声明提升到了代码（所在函数）的最顶部，所以代码中先调用函数或者是先给变量赋值再声明都没有问题，当然这是抽象的概念，记住这个已经能解决8-90%的编程问题了，如果你想了解具体的流程，可以接着往下看。

二. 局部函数预编译过程

创建AO（Activation Object）对象

找形参和变量声明，将变量和形参名作为AO对象的属性名，默认值为undefind

将实参值和形参相关联

找函数声明，值为其函数体

例子一

<script type="text/javascript">
    function test(a) {
        var b = 10;     
        function c() {       
        }                       
    }                                   
    test(1);                    
</script>

根据过程来我们可以得出右边的AO对象中的数值，a最终保存的是1,因为第三步需要把形参和实参相关联

例子一AO转化过程

例子二

<script type="text/javascript">
    function test(a) {             
        var a = 10;          
        function a() {               
        }
    }
    test(1);
</script>

对象中同名的属性会只保留一个，所以经过第二步寻找变量声明和形参的时候，AO对象中会有一个a，且默认值为undefind，经过第三步实参值和形参相关联后，a的值变为1，经过第四步找函数声明的时候发现有个名字为a的函数，AO中本身就有a的属性名了，所以这个时候会将a的函数体赋值给AO中的a。

例子二AO转换过程

如果上面的例子能够搞懂的话，咱们就可以接着玩一个题

例子三

<script type="text/javascript">
    function test(a) {
        console.log(a);
        var a = 10;
        console.log(a);
        function a() {
            consoel.log('这是函数a');
        }
    }
    test(1);
</script>

如果你心中的结果跟答案一致，说明已经清楚了局部函数预编译的四个步骤了

例子三打印结果

例子三转化过程

到test函数执行之前AO对象中a的值为a的函数体这个应该没有什么问题吧？所以第一个log打印出来的是a的函数体，第二个log之前由于有var a = 10;，这个经过变量的声明提升后可以看做是a = 10;，走到这里这里AO中的a被赋值为10，所以第二个log打印的就是10。

二. 全局函数预编译过程

创建GO（Global Object）对象

找变量声明，将变量名作为GO对象的属性名，默认值为undefind

找函数声明，值为其函数体

全局函数的过程跟局部函数差不多，由于全局函数没有形参和实参的传递，所以省略了一个步骤。

例子四

<script type="text/javascript">
    console.log(a);
    var a = 1111;
    console.log(a);
    function a() {
        console.log('这里是a函数');
    }
</script>

这里例子四的输出和转化结果跟例子三差不多，只不过是AO对象变成了GO对象。

例子五

<script type="text/javascript">
    console.log(a);
    var a = 10;
    function a(a) {
        console.log(a);
    }
    a(1);
</script>

这里可以看看第二个log打印的是什么，还是会报错？

例子五输出结果

第一个log打印a函数的函数体没有问题吧？第二个log为什么会报错呢？因为GO对象中保存的a属性在第一次log的时候保存的是a的函数体，但是下面有个a=10;的赋值，这个时候GO中的a就被修改成10了，后面调用a(1)函数的时候，找到GO中的a，这个时候a是number数字而不是函数，所以会报错说a is not a function。

例子六

<script type="text/javascript">
    var a = 1;
    var b = 2;
    function test(a) {
        var a;
        console.log(a);  // 输出10
        a = 100;
        console.log(a);  // 输出100
        console.log(b); // 输出2
    }
    test(10);
    console.log(a);  // 输出1
</script>

看看例子六的输出结果是不是符合自己的心里预期。我们都知道函数内部有变量会优先使用自身内部的变量，其实也可以转化成AO和GO来理解。
第一个log输出的时候找到自身的AO中有属性a，且这个值是实参传递过来的，所以是10。
第二个log由于前面有a=100所以a被赋值成了100。
第三个log会找自己的AO，发现自己的AO里没有这个b属性，就会去找到父函数的AO，由于这里父函数是全局函数了，所以就去找GO里有没有b属性，有的话就输出了GO里的b的值，所以是2。（如果这里GO中也没有b属性的话，就会报b is not defined的错误了）
第四个log输出的就是自身AO也就是GO中的a属性的值了。

看完这几个例子相信你应该对预编译有个比较清晰的认识了，这里的面试题很多，但是万变不离其中，我们只需要把AO和GO分析出来，那么就可以清晰的了解到函数运行过程中每一步的每个属性值分别是什么了。

以上我们讨论的范围均是var定义的变量，很多场景并不适用于let或const定义的变量，如果你想了解这三个关键字的区别，请翻看这篇文章。