JavaScript 执行机制深度解析（上）：编译、提升与执行上下文

引言：你以为的顺序，不是引擎看到的顺序

当你写下一行 JavaScript 代码时，是否曾想过：浏览器真的按照你写的顺序执行吗？为什么 showName() 在函数定义之前调用却不会报错？为什么 console.log(myName) 输出的是 undefined 而不是报错？这些看似"反直觉"的现象背后，隐藏着 V8 引擎精妙的执行机制。

JavaScript 并非像我们想象中那样"逐行解释执行"。相反，它在真正运行前会经历一个短暂但至关重要的编译阶段。正是这个阶段，决定了变量和函数的命运，也塑造了 JavaScript 独特的运行时行为。本文将带你深入 V8 引擎内部，揭开 JavaScript 执行机制的第一层面纱。

---

一、V8 引擎：JavaScript 的"翻译官"与"调度员"

Chrome 浏览器中的 V8 引擎不仅是 JavaScript 的执行环境，更是一个高性能的编译器。它负责将人类可读的 JS 代码转化为机器能高效执行的指令。

与其他语言（如 C++、Java）不同，JavaScript 是一种即时编译（JIT）语言 ：它没有独立的编译步骤，而是在执行前的一瞬间完成编译。这种"边编译、边执行"的特性，使得 JS 既灵活又高效，但也带来了独特的语义规则------比如变量提升。

正是这种"编译发生在执行前的一霎那"的机制，让 JS 表现出与传统编译型语言截然不同的行为。

---

二、两个阶段：编译与执行的交响曲

2.1 编译阶段：准备舞台

在代码真正运行前，V8 会进行一次"预演"：

• 检查语法错误
• 识别所有变量和函数声明
• 创建执行上下文（Execution Context）
• 进行变量提升（Hoisting）

例如，对于以下代码：

showName();
console.log(myName);
var myName = '张三';
function showName() {
    console.log('函数被执行');
}

V8 在编译阶段会将其"重排"为：

// 编译阶段处理后（逻辑上）
var myName; // 提升为 undefined
function showName() { ... } // 函数声明整体提升

// 执行阶段
showName();        //  正常执行
console.log(myName); // undefined
myName = '张三';   // 赋值

这就是为什么 showName() 能在定义前调用，而 myName 输出 undefined 而非报错。

2.2 执行阶段：正式演出

当编译准备就绪，V8 开始逐行执行代码。此时：

• 变量被赋予实际值
• 函数被调用
• 表达式被求值

关键点在于：编译只发生一次，执行可能多次（如函数被反复调用）。

---

三、执行上下文与调用栈：JS 的"内存剧场"

3.1 什么是执行上下文？

每次 JS 代码运行，都会创建一个执行上下文对象，它包含三个核心部分：

1. 变量环境（Variable Environment） ：存放 var 声明的变量和函数声明
2. 词法环境（Lexical Environment） ：存放 let/const 声明的变量（处于"暂时性死区"）
3. this 绑定与作用域链信息

3.2 调用栈：函数执行的"舞台调度系统"

JS 使用**调用栈（Call Stack）**来管理函数的执行顺序：

• 全局代码首先创建全局执行上下文，压入栈底
• 每调用一个函数，就创建新的函数执行上下文，压入栈顶
• 函数执行完毕，其上下文出栈，相关变量被垃圾回收

function A() { B(); }
function B() { C(); }
function C() { console.log('执行'); }
A(); // 调用栈：global → A → B → C → B → A → global

这种"后进先出"的结构，确保了函数执行的有序性和内存的高效回收。

---

四、var 与 let/const：提升规则的分水岭

4.1 var：宽松的"老派"声明

• 变量提升 ：声明被提升到作用域顶部，初始化为 undefined
• 允许重复声明 ：var a = 1; var a = 2; 不报错
• 函数优先级更高：函数声明比同名变量提升更彻底

console.log(a); // function a() {}
var a = 1;
function a() {}

4.2 let/const：严格的"现代"声明

• 不提升值，但有"暂时性死区"（TDZ） ：在声明前访问会报错
• 禁止重复声明：同一作用域内不能重复声明
• 存放在词法环境中，而非变量环境

console.log(b); //  ReferenceError: Cannot access 'b' before initialization
let b = 1;

这种设计避免了 var 时代因提升导致的意外行为，使代码更安全、可预测。

---

五、函数是一等公民：声明的特殊待遇

在 JavaScript 中，函数声明具有最高优先级。在编译阶段：

1. 所有函数声明被完整提升（包括函数体）
2. 变量声明次之（仅提升名称，值为 undefined）
3. 函数表达式不会提升

func(); //  TypeError: func is not a function
let func = () => { console.log('函数表达式不会提升'); };

这是因为 func 是 let 声明的变量，其值（函数表达式）在执行阶段才赋值。

---

结语：理解机制，写出更可靠的代码

JavaScript 的执行机制看似复杂，实则逻辑严密。通过理解编译阶段的提升行为 、执行上下文的创建过程 以及调用栈的工作原理，我们不仅能解释那些"奇怪"的输出结果，更能写出更健壮、更高效的代码。

在下篇中，我们将深入探讨参数传递、值拷贝与引用拷贝的本质 ，以及严格模式如何改变变量行为，进一步揭开 JavaScript 内存模型的神秘面纱。