深入理解JavaScript预编译：GO与AO对象创建过程

本文详细解析JavaScript引擎在代码执行前的预编译过程。涵盖全局执行上下文（GO）的创建及变量、函数声明的处理，以及函数调用时活动对象（AO）的生成逻辑。通过示例展示变量提升与函数声明优先级的具体表现，帮助开发者深入理解作用域链与执行上下文的基础机制。

全局预编译

创建全局对象（Global Object, GO）：

在浏览器环境中，全局对象指的是window对象。

处理变量声明：

扫描代码中所有的变量声明，将变量名作为全局对象的属性名，其初始值被设定为undefined。

处理函数声明：

扫描代码中所有的函数声明，将函数名作为全局对象的属性名，其值指向整个函数对象（即完整的函数体）。

示例：

console.log(a); // undefined
var a = 10;
console.log(foo); // Function: foo
function foo() {
    return "hello";
}

全局预编译后的全局对象状态如下：

1.创建GO对象
GO{
    // 空对象
}

2.处理变量声明
GO = {
    a: undefined
}

3.处理函数声明
GO = {
    a: undefined,
    fn: function() {}
}

函数预编译

创建活动对象（Activation Object, AO）：

每当函数被调用时，JavaScript引擎都会创建一个新的活动对象。

处理形参和变量声明：

将函数的形参以及内部变量名作为活动对象的属性名，初始值均设为undefined。

形参和实参统一：

随后，将调用时传入的实参值赋给对应的形参属性。

处理函数声明：

扫描函数内部的函数声明，将函数名作为活动对象的属性名，其值为对应的函数对象。

示例：

function bar(x, y) {
    console.log(x); // Function: x
    var x = 20;
    console.log(x); // 20
    function x() {}
    console.log(x); // 20
    var y = function() {};
    console.log(y); // Function: y
}
bar(2);

函数预编译后的活动对象状态如下：

1.创建AO对象
AO{
    //空对象
}

2.处理形参和变量声明，值为undefined
AO = {
    x: undefined,
    y: undefined,
}

3.实参和形参统一
AO = {
    x: 2,
    y: undefined
}

4.处理函数声明
AO = {
    x: 2,
    y: function() {},
    x: function() {}
}

总结

通过预编译机制，JavaScript确保在代码实际执行前，所有变量和函数声明均已就绪，从而避免引用错误。这一机制是理解JavaScript作用域及变量提升（hoisting）现象的核心基础。

到此这篇关于JavaScript预编译的基本概念和过程详解的文章就介绍到这了,更多相关JavaScript预编译内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript预编译机制详解：全局与函数执行上下文

全局预编译

函数预编译

总结

实用工具推荐