学习JavaScript底层逻辑之预编译

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

1. 变量声明，声明提升

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

javascript 复制代码

    console.log(a)
    var a = 10;

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

javascript 复制代码

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

2. 函数声明，整体提升

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

javascript 复制代码

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

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

注意：

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

函数中的预编译

创建函数的执行上下文对象 (AO / Lexical Environment)

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

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

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

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

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

javascript 复制代码

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

详解如下

创建函数的执行上下文对象 (AO):

初始化AO，为函数fn创建一个新的词法环境。
找形参和变量声明:

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

此时 AO 大致如下：

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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的值。

全局预编译

创建全局执行上下文对象 (Global Object, GO)

当JavaScript环境初始化时，无论是浏览器环境下的window对象（浏览器全局对象）还是Node.js环境下的global对象（Node.js全局对象），都会创建一个全局执行上下文。
找变量声明，变量名作为GO的属性名，值为undefined

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

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

javascript 复制代码

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

分析例子：

javascript 复制代码

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

创建GO

javascript 复制代码

GO:{}

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

javascript 复制代码

GO:{
    num : undefined
}

找函数声明,foo(){}

javascript 复制代码

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

执行全局

javascript 复制代码

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

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