学习JavaScript底层逻辑之预编译

本文主要是介绍学习JavaScript底层逻辑之预编译，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

认识预编译前首先需要知道声明提升的概念

1. 变量声明，声明提升

在JavaScript中，变量声明（使用var、let、const关键字）会被提升到当前作用域的顶部。但其初始化（赋值）部分仍然保留在原地。 例如：

    console.log(a)var a = 10;

这串代码能够正常运行，它将等价于

    var a;console.log(a)a = 10

2. 函数声明，整体提升

函数声明（使用function关键字）同样会被提升，但不同于变量声明，整个函数体也会被提升，而不仅仅是函数声明。 例如：

    console.log(greet()); // 输出 "Hello, world!" function greet() {return "Hello, world!";}

尽管greet函数在调用之前声明，但由于函数声明的整体提升，这段代码能够正常运行。

注意：

• 函数表达式不会被提升，只有函数声明会被提升。例如，var greet = function() {…};不会被提升。
• 块级作用域：let和const引入了块级作用域，这改变了变量声明的作用域规则，使得它们在声明它们的块之外不可见。

函数中的预编译

1. 创建函数的执行上下文对象 (AO / Lexical Environment)
   每当一个函数被调用时，JavaScript引擎首先会为其创建一个新的执行上下文（Execution Context）。对于函数而言，这个上下文特别被称为活动对象（Activation Object, AO） 或在ES6标准中更准确地称为词法环境（Lexical Environment）。这个环境保存了函数执行时的所有局部变量、参数、以及对外部作用域的引用等信息。

2. 找形参和变量声明，将形参和变量名作为AO的属性，值为undefined
   接下来，函数的形参（形式参数）和在其内部声明的变量会被收集并加入到AO中。在实际的值被赋给它们之前，这些变量和形参都被初始化为undefined。这意味着在函数体内的任何代码执行之前，所有声明的变量都已经存在，但还没有具体的值。

3. 将实参和形参统一
   当函数被调用时，传入的实参（实际参数）会与之前声明的形参相匹配并赋值。这个过程发生在预编译阶段之后，实参的值会覆盖AO中形参的默认undefined值。通过这种方式，函数内部就可以使用这些传入的值进行计算和操作。

4. 在函数体内找函数声明，将函数名作为AO的属性名，值赋予函数体
   最后，函数体内部的函数声明也会被处理。任何在函数内部声明的函数会被提升到AO中，并将其函数体赋值给相应的属性名。这意味着内部函数可以在函数体的任何地方被访问和调用，即使声明在调用点之后。这一点与变量声明类似，但要注意的是，函数声明会覆盖掉同名的变量声明（如果有的话）。

利用上面的步骤分析如下代码

    function fn(a) {console.log(a); // [Function: a]var a = 123console.log(a); // 123  function a() {}console.log(a); // 123var b = function () {}console.log(b); // [Function: b]    function d() {}var d = aconsole.log(d); // 123}fn(1)

详解如下

1. 创建函数的执行上下文对象 (AO):
   初始化AO，为函数fn创建一个新的词法环境。

2. 找形参和变量声明:
   将形参a加入AO，值为undefined。发现变量声明var a，加入AO，值为undefined（注意这里先于形参声明，但不影响最终结果，因为形参的赋值会覆盖这个undefined）。发现变量声明var b，加入AO，值为undefined。发现函数声明function d() {}，加入AO，值为undefind。
   此时 AO 大致如下：

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

3. 将实参和形参统一: 实参1与形参a绑定，此时AO中的a值为1。 此时 AO 大致如下：

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

4. 处理函数体内的函数声明:
   处理函数声明function a() {}，由于函数声明优先级高于变量声明，此处将a视为函数定义，值为函数体。处理var b = function () {}，但由于之前已经声明了b，这里相当于赋值操作，b变为一个新函数。
   函数声明function d() {}，值变为 function d(){}
   此时 AO 大致如下：

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

5. 最后，执行函数fn里的代码：

console.log(a); // [Function: a]
//打印出a，由于函数声明优先，此时a是函数。var a = 123
//变量a被赋予新值123，覆盖了函数声明。console.log(a); // 123
//打印出a，现在值为123。console.log(a); // 123
//再次打印a，依然是123，因为之前的赋值操作已经改变了a的值。var b = function () {}b被赋予一个新的函数表达式，覆盖了之前的函数声明。console.log(b); // [Function: b]
//打印出b，现在是一个函数表达式的值。function d() {}
//此处的d函数声明被忽略，因为前面已有同名的变量声明。var d = a
//d被赋予a的值，即123。console.log(d); // 123
//打印出d，值为123，因为d被赋值为a的值。

全局预编译

1. 创建全局执行上下文对象 (Global Object, GO)
   当JavaScript环境初始化时，无论是浏览器环境下的window对象（浏览器全局对象）还是Node.js环境下的global对象（Node.js全局对象），都会创建一个全局执行上下文。

2. 找变量声明，变量名作为GO的属性名，值为undefined
   在全局范围内，任何使用var、let、const或function声明的变量（函数也是一种特殊类型的变量）都会被识别并处理。在这个阶段，变量名会作为全局执行上下文对象的属性添加，但其值初始化为undefined。这意味着在变量真正被赋值之前，尝试访问它们会得到undefined。

3. 在全局找函数声明，函数名为GO的属性名，值为函数体
   对于使用function关键字声明的函数，其名称和函数体也会在预编译阶段被加入到全局执行上下文中。与变量类似，函数名成为上下文的一个属性，但其值是函数的定义（函数体），而不是undefined。这允许在函数声明之前调用函数。

sayHello(); // 输出 "Hello, World!"
function sayHello() {console.log("Hello, World!");
}

分析例子：

    var num = 10function foo(){console.log(num)}foo()

1. 创建GO

GO:{}

2. 找变量声明 变量num通过var声明并在全局上下文中被提升，其初始值为undefined。

GO:{num : undefined
}

3. 找函数声明,foo(){}

GO:{num:undefinedfoo: function foo(){}
}

4. 执行全局

GO:{num:100foo:function foo(){}
}

执行foo（）创建AO 最后输出num=100

这篇关于学习JavaScript底层逻辑之预编译的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---