JavaScript预编译原理分析

发表于

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

  • 我们应该已经知道:JavaScript是解释型语言。(解释型语言，就是编译一行，执行一行)
  • 传统的编译会经历很多步骤，分词、解析、代码生成什么的
  • 下面就给大家分享一下我所理解的JS预编译
  • JavaScript运行三部曲*
    脚本执行js,引擎都做了什么呢？
  1. 语法分析

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

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

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

  1. 解释执行

解释一行执行一行

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

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

全局中:预编译三部曲
5. 创建GO对象(Global Object window就是全局)
6. 找变量声明,将变量声明作为GO对象的属性名，值赋予undifined
7. 找全局里的函数声明，将函数名作为GO对象的属性名，值赋予函数体

实例分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
js复制代码<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中存储的值*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
js复制代码    //抽象描述
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)语句）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
js复制代码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()之前，再次发生预编译

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

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

1
2
3
4
5
js复制代码//抽象描述
    AO = {
        a:undefined,
        b:undefined,
    }

预编译之第3步如下：

1
2
3
4
5
js复制代码 //抽象描述
    AO = {
        a:123,
        b:undefined,
    }

预编译之第4步如下：

1
2
3
4
5
6
js复制代码//抽象描述
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
js复制代码 //抽象描述
    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() {}
    }

执行结果：

QQ截图20210423225850.png

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

预编译小节

  1. 预编译两个小规则
1. 函数声明整体提升—(无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
2. 变量 声明提升—(无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）
  1. 预编译前奏
1. 即任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是Window)
2. 一切声明的全局变量，全是window的属性，如：var a=12;等同于Window.a = 12;
3. 函数预编译发生在函数执行前一刻。

参考链接

参考链接

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%