小白自学：js中的预编译

深入解析 JavaScript 预编译机制

在 JavaScript 中，预编译是一个关键且常见的概念，它发生在函数执行之前或在全局作用域中。本文将探讨 JavaScript 预编译机制的发生过程，并分别介绍函数执行前和全局作用域中的预编译过程。

1. 预编译发生在函数执行之前

预编译发生在函数执行之前，主要分为四个步骤：

步骤一：创建 AO 对象（Action Object）

AO 对象是函数执行上下文中的一个重要部分，它用于存储函数内部的变量和函数声明。在预编译阶段，JavaScript 引擎会创建一个 AO 对象。

步骤二：找形参和变量声明

在 AO 对象中，JavaScript 引擎会找到函数的形参和变量声明，并将它们作为 AO 对象的属性名，值为 undefined。

步骤三：统一形参和实参值

JavaScript 引擎会将函数的形参和实参值进行统一，以保证函数执行时能够正确地访问到实参的值。

步骤四：找函数声明

在函数体内，JavaScript 引擎会找到函数声明，并将函数名作为 AO 对象的属性名，值赋予函数体。

预编译发生在函数执行之前的示例

function example(x) {
    var y = 2;
    function inner() {
        console.log(z);
    }
    var z = 3;
    inner();
}

example(1);

在这个示例中，函数 example 在被调用之前会经历预编译的过程。

预编译步骤：

1. 创建 AO 对象：

AO = {

};

2. 找形参和变量声明：

AO = {
    x: undefined
    y: undefined
    z: undefined
}

3. 统一形参和实参值：

AO = {
    x: 1
    y: undefined
    z: undefined
}

4. 找函数声明：

AO = {
    x: 1
    y: undefined
    z: undefined
    inner: function(){}
}

5. 执行阶段

function example(x) {
    var y = 2; //将2赋值给有 类似于AO.y = 2
    function inner() {
        console.log(z); //输出为 3
    }
    var z = 3; //将3赋值给z 类似于AO.z = 3
    inner();
}

example(1);

在执行阶段，函数 inner 内部可以访问到变量 z，因为 z 已经被预编译并赋值为 undefined，后面执行代码z = 3的时候就会将3赋给z，这样后面console.log(z)输出的答案就是3。

2. 预编译发生在全局作用域中

预编译发生在全局作用域中，主要分为三个步骤：

步骤一：创建 GO 对象（Global Object）

GO 对象是全局作用域中的一个重要部分，它用于存储全局变量和函数声明。在预编译阶段，JavaScript 引擎会创建一个 GO 对象。

步骤二：找变量声明

在全局作用域中，JavaScript 引擎会找到所有的变量声明，并将它们作为 GO 对象的属性名，值为 undefined。

步骤三：找函数声明

在全局作用域中，JavaScript 引擎会找到所有的函数声明，并将函数名作为 GO 对象的属性名，值赋予函数体。

通过以上步骤，JavaScript 引擎在预编译阶段完成了对变量和函数声明的处理，为后续的代码执行提供了基础。理解 JavaScript 预编译机制对于写出高质量、可维护的 JavaScript 代码至关重要。

预编译发生在全局作用域中的示例

var globalVar = "I'm a global variable";

function globalExample() {
    console.log("Hello, global world!");
}

function globalFunction() {
    console.log("I'm a global function!");
}

globalExample();
globalFunction();

在这个示例中，全局作用域中的函数和变量会经历预编译的过程。

预编译步骤：

1. 创建 GO 对象：

GO = {};

2. 找变量声明：

GO = {
    globalVar: undefined,
};

3. 找函数声明：

GO = {
    globalVar: undefined,
    globalExample: function(){},
    globalFunction: function(){}
};

4. 执行阶段

var globalVar = "I'm a global variable"; 
//将GO.globalVar: undefined 变成  GO.globalVar: "I'm a global variable"

function globalExample() {
    console.log("Hello, global world!");
}

function globalFunction(innerValue) {
    console.log(innerValue);
}

globalExample(); 
globalFunction(globalVar); //输出为 "I'm a global variable"

在执行阶段，全局作用域中的变量和函数都已经被预编译，并且可以被访问和调用。

3. 总结

预编译是 JavaScript 中一个重要的概念，它使我们可以在代码执行之前对变量和函数进行处理。通过了解 JavaScript 中的预编译机制，我们可以更好地理解代码的执行过程，并避免出现意外的错误。希望本文能够帮助您更好地理解 JavaScript 中的预编译机制。