JavaScript预编译学习

Posted 2021-09-27 战场小包

javascript 预编译

在重新学习JavaScript之前，先了解一下JavaScript从编译到执行的过程，大致分为四步：

1. 词法分析
2. 语法分析：检查代码是否存在错误，若有错误，引擎会抛出语法错误。同时会构建一颗抽象语法树(AST)
3. 预编译
4. 解释执行

预编译

JavaScript是解释性语言，也就是说，编译一行，执行一行，但js并非上来就进入编译环节，它在编译之前存在预编译过程。js中预编译一般有两种：全局的预编译和函数的预编译，分别发生在script内代码执行前和函数的执行前

1. 函数预编译

首先来看一个例子：

function test(a) {
    console.log(a);       // ƒ a() {}
    var a = 123;
    console.log(a);       // 123
    function a() {}
    console.log(a);       // 123
    var b = function() {}
    console.log(b);       // ƒ () {}
    function d() {}
}
test(1)

要想弄明白最终的输出结果，就不得不好好学习一下预编译的详细过程。最早做这个题时，听说过这样两句话：函数声明整体提升，变量 声明提升。这两句话可以解决大多数的提升问题，但面临函数与变量重名时，就必须解决函数与变量谁的优先级更高那？上面结果其实已经证明了，函数的更高。

1.1 预编译详解

1. 预编译开始，会建立AO(执行期上下文)对象
2. 找形参和变量声明，使其作为AO的属性名，值赋予undefined
3. 实参和形参相统一
4. 找函数声明，值赋予函数体

1.2 解析上述案例

有了预编译过程，就可以按部就班的得出最终的输出方案

1. 先建立AO，并找形参和变量声明

AO :{
    a: undefined,
    b: undefined
}

2. 形参实参相统一

AO :{
    a: 1,
    b: undefined
}

3. 找函数声明，值赋予函数体

AO :{
    a: function a() {},
    b: undefined,
    d: function d() {}
}

4. 第一个console.log(a)，AO中当前值为 ƒ a() {}
5. a = 123，修改AO中a值，于是第二个和第三个console.log(a)都输出123
6. b = function() {}，b值为function() {}

2. 全局预编译

全局中不存在形参和实参，所以只需处理变量声明和函数声明

2.1 全局预编译过程

1. 生成GO
2. 找变量声明，由于全局变量默认挂载在window之上，若window当前已存在当前属性，忽略当前操作，若没有，变量作为属性名，值赋予undefined。
3. 找函数声明，函数类似与变量，先去window上查看，不存在，函数作为函数名，值为函数体

2.2 案例分析

将函数预编译案例稍微修改，如下

// test部分的结果与函数部分相同，再次只分析全局部分
console.log(a);
var a = 1;
console.log(a);
function test(a) {
    console.log(a);
    var a = 123;
    console.log(a);
    function a() {}
    console.log(a);
    console.log(b);
    var b = function() {}
    console.log(b);
}
test(2);

1. 生成GO，变量提升，函数提升，得到GO如下:

GO/window: {
    a: undefined,
    test: function() {}
}

2. 因此第一个a的值为undefined，随后a赋值为1，所以第二个a的值为1

3. 其他注意事项

当函数中出现同样名称的函数名和变量名，编译器真的会先做变量提升再去函数提升吗？查看了一些大佬的博客，当出现变量名和函数名相同时，变量提升应该会被忽略掉，不会做重复的无用之功

let/const声明的变量应当同样进行了变量提升，只不过它与var声明的变量做了一定的区分