一、引言
在JavaScript的执行过程中，预编译是一个非常重要但容易被忽视的阶段。预编译发生在代码执行之前，该过程旨在对变量和函数的声明进行提前处理，理解预编译的原理和执行过程对开发者准确把握JavaScript的运行特性和底层原理有着重要意义。今天，让我们一起来了解学习这个神奇的过程吧！
二、JavaScript的执行环境
在讨论预编译前，我们首先来了解JavaScript的执行环境。执行环境是JavaScript代码执行的环境抽象，它定义了变量和函数有权访问的上下文信息，主要分为全局执行上下文和函数执行上下文。当JavaScript代码被执行时，V8引擎首先创建一个调用栈来存取代码执行产生的全局执行上下文和函数执行上下文的信息。
三、预编译的本质：代码执行前的“隐形准备”
预编译是JavaScript引擎在代码执行前进行的静态分析过程，主要完成以下任务：
🔍声明处理：对变量、函数声明进行提升
🔍作用域构建：确定变量和函数的访问范围
🔍内存分配：为变量和函数分配初始内存空间
另外，我们需注意：预编译≠编译型语言的“编译”，因为JavaScript是解释型语言，预编译仅在代码执行前的瞬间完成，而非生成可执行文件。
四、预编译的核心流程：从“词法分析”到“执行上下文”
🔍词法分析：引擎将代码字符串拆分为词法单元，如关键字（var/function）、标识符（变量名）、运算符（=/+）等。
示例：
var a = 10;
词法分析后得到：var、a、=、10、;。
🔍语法分析：验证代码语法是否正确，若存在语法错误（如缺少括号），引擎会在阶段报错。
🔍执行上下文创建：这是预编译核心阶段，包含三部分：
- 变量对象（Variable Object，VO） ：存储变量、函数声明及函数参数
- 作用域链（Scope Chain） ：确定变量查找路径
- this 绑定：指定当前执行环境的上下文对象
五、变量提升与函数提升：预编译的“显性特征”
🔍变量提升：使用 var 声明的变量，声明会被提升到作用域顶部，但赋值保留在原地。未声明的变量不会提升。
示例：
console.log(a);
var a = 10;//输出undefined
上述示例等价于
var a; // 预编译阶段：声明提升
console.log(a);
a = 10; // 执行阶段：赋值
🔍函数提升：函数声明（function fn() {}）整体提升，可在声明前调用。函数表达式（var fn = function() {}）仅变量名提升，函数体不提升。
示例1：函数声明提升
fn();
function fn() { console.log("函数声明被调用"); }
运行结果：
示例2：函数表达式不提升
fn();
var fn=function() { console.log("函数声明被调用"); }
运行结果：
上述示例等价于：
var fn; // 变量提升
fn(); // 执行时 fn 未赋值，为 undefined
fn = function() { ... };
🔍提升优先级：函数声明>变量声明
示例：若函数与变量同名，函数声明优先提升
console.log(a); // 输出：[Function: a]（函数声明覆盖变量声明）
var a = 10;
function a() {}
// 预编译阶段：
// 1. 函数声明提升：function a() {}
// 2. 变量声明提升：var a;（已存在函数 a，忽略变量声明）
六、代码执行过程
示例：
var a =2
function add(){
var b = 10
return a+b
}
console.log(add());
过程分析：
预编译过程中，引擎首先创建一个调用栈，用于存取全局执行上下文和函数执行上下文。先全局执行上下文入栈，内部分为变量环境和词法环境，全局定义了一个a变量和一个add函数，存于变量环境中，经变量提升a=undefined，后赋值为2，add=function{}。后add函数的执行上下文入栈，函数体内只定义了一个变量b，经变量提升b=undefined，后赋值为10。示意图如下所示
七、总结
预编译是 JavaScript 引擎的“幕后英雄”，它通过变量提升、作用域构建等机制，为代码执行提供了坚实的底层支撑。理解预编译，更能帮助我们开发出更高效、可靠的代码！
