JavaScript预编译原理分析

首先JavaScript这个预编译和传统的编译是不一样的（可以把js预编译理解为特殊的编译过程）

• 我们应该已经知道:JavaScript是解释型语言。(解释型语言，就是编译一行，执行一行)
• 传统的编译会经历很多步骤，分词、解析、代码生成什么的
• 下面就给大家分享一下我所理解的JS预编译

JavaScript运行三部曲
脚本执行js,引擎都做了什么呢？

1. 语法分析

先全部扫一遍 看有没有语法错误.

2. 预编译(执行前一刻)

变量 声明提升
函数声明整体提升

3. 解释执行

解释一行执行一行

函数中:预编译执行四部曲

1. 创建AO对象 (Activation Object (执行期上下文))
2. 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3. 将实参值和形参统一
4. 在函数体里面找函数声明,值赋予函数体

全局中:预编译三部曲

1. 创建GO对象(Global Object window就是全局)
2. 找变量声明,将变量声明作为GO对象的属性名，值赋予undifined
3. 找全局里的函数声明，将函数名作为GO对象的属性名，值赋予函数体

实例分析

<script>
    var a = 1;
    console.log(a);
    function test(a) {
        console.log(a);
        var a = 123;
        console.log(a);
        function a() {}
        console.log(a);
        var b = function() {}
        console.log(b);
        function d() {}
    }
    var c = function (){
        console.log("I at C function");
    }
    console.log(c);
    test(2);
</script>
复制代码

分析过程如下：

1. 页面产生便创建GO全局对象（Global Object）（也就是window对象）；
2. 第一个脚本文件加载；
3. 脚本加载完毕后，分析语法是否合法；
4. 开始预编译

• 查找变量声明，作为GO属性，值赋予undefined；
• 查找函数声明，作为GO属性，值赋予函数体；

全局预编译结束后，GO中存储的值

    //抽象描述
GO/window = {
        a: undefined,
        c: undefined，
        test: function(a) {
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}
        }
    }
复制代码

解释执行代码（直到执行完test(2)语句）

GO/window = {
        a: 1,
        c: function (){
            console.log("I at C function");
        }
        test: function(a) {
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}
        }
    }
复制代码

执行函数test()之前，再次发生预编译

根据函数中:预编译执行四部曲可知

预编译第一和第二两小步如下：

//抽象描述
    AO = {
        a:undefined,
        b:undefined,
    }
复制代码

预编译之第3步如下：

 //抽象描述
    AO = {
        a:123,
        b:undefined,
    }
复制代码

预编译之第4步如下：

//抽象描述
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }
复制代码

执行test()函数时如下过程变化：

 //抽象描述
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123,
        b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123,
        b:function() {}
        d:function d() {}
    }
复制代码

执行结果：

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

预编译小节

1. 预编译两个小规则

   1. 函数声明整体提升—(无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
   2. 变量 声明提升—(无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

2. 预编译前奏

   1. 即任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是Window)
   2. 一切声明的全局变量，全是window的属性，如：var a=12;等同于Window.a = 12;
   3. 函数预编译发生在函数执行前一刻。

参考链接

参考链接