JavaScript 执行机制详解：从 V8 引擎到执行上下文

JavaScript 是一门动态、解释型的脚本语言，其执行过程看似简单，实则背后有一套精密的机制在支撑。本文将深入探讨 Chrome 浏览器中 V8 引擎 如何处理 JavaScript 代码，解析"编译"与"执行"的两个关键阶段，并揭示 var 与 let/const 在执行机制中的本质差异。

一、JS 的执行并非"所写即所得"

你是否曾疑惑：为什么变量可以在声明前使用？为什么函数可以在定义前调用？这背后的关键在于------JavaScript 并非严格按照代码书写顺序执行。

V8 引擎（Chrome 和 Node.js 使用的 JS 引擎）在真正执行代码前，会先进行一个快速的"编译"过程。这个过程发生在执行前的一瞬间，为后续的执行做好准备。

二、JavaScript 执行的两个阶段

1. 编译阶段（Compilation Phase）

尽管 JavaScript 被称为"解释型语言"，但现代引擎（如 V8）实际上采用了 即时编译（JIT, Just-In-Time Compilation） 技术。在执行前，V8 会对代码进行初步分析：

语法检查：检测是否存在语法错误。
变量与函数提升（Hoisting） ：
- var 声明的变量会被提升至当前作用域顶部，初始化为 undefined。
- 函数声明会被完整提升（包括函数体）。
- let 和 const 也会被"提升"，但不会初始化，处于 暂时性死区（Temporal Dead Zone, TDZ） ，访问会报错。

⚠️ 注意：这里的"编译"并非像 C++ 那样生成机器码，而是构建执行所需的上下文结构。

2. 执行阶段（Execution Phase）

在编译阶段准备好的基础上，V8 开始逐行执行代码：

已提升的变量此时被赋予实际值。
函数调用触发新的执行上下文创建。
表达式求值、赋值、控制流等操作在此阶段完成。

三、执行上下文与调用栈

V8 使用 调用栈（Call Stack） 来管理代码的执行流程。每一次函数调用，都会创建一个 执行上下文（Execution Context） ，并压入调用栈。

执行上下文的组成

每个执行上下文包含三个核心部分：

变量环境（Variable Environment）
存放 var 声明的变量、函数声明、形参等。这些在编译阶段就被初始化（如 var a = undefined）。
词法环境（Lexical Environment）
存放 let、const 声明的绑定，以及块级作用域信息。它们在编译阶段被记录，但处于 TDZ，直到执行到声明语句才可访问。
this 绑定与可执行代码

调用栈的工作流程

程序启动时，全局执行上下文首先被压入调用栈。
每当调用一个函数，V8 创建对应的函数执行上下文，压入栈顶。
函数执行完毕后，其上下文从栈中弹出，相关变量被垃圾回收。

✅ 栈结构保证了函数执行的"后进先出"特性，确保作用域链和内存管理的正确性。

四、var 与 let/const 的执行机制差异

特性	`var`	`let` / `const`
提升方式	提升并初始化为 `undefined`	提升但不初始化（TDZ）
作用域	函数作用域	块级作用域
重复声明	允许	不允许（严格模式下报错）
存储位置	变量环境	词法环境

示例：

ini 复制代码

console.log(a); // undefined
console.log(b); // ReferenceError: Cannot access 'b' before initialization

var a = 1;
let b = 2;

在编译阶段：

a 被放入变量环境，值为 undefined。
b 被放入词法环境，但处于 TDZ，无法访问。

五、函数调用时的执行上下文创建

以如下代码为例：

ini 复制代码

function fn(a) {
  var a = 2;
  var b = a;
}
fn(3);

编译阶段（进入 fn 时）：

创建函数执行上下文。
形参 a 被设为 3（实参传入）。
var a 与形参 a 同名，不重复创建 ，仍为 3。
var b 被提升为 undefined。

执行阶段：

a = 2 → 覆盖形参值。
b = a → b = 2。

💡 函数声明优先级高于变量声明，且函数是一等对象，可被赋值、传递。

六、总结：JS 执行机制的核心要点

先编译，后执行

JavaScript 虽是脚本语言，但 V8 会在执行前进行快速编译，构建执行上下文。
调用栈驱动执行流程

以函数为单位，通过栈结构管理上下文的创建与销毁，确保作用域和内存安全。
变量提升的本质是上下文预处理
- var → 变量环境，初始化为 undefined
- let/const → 词法环境，存在暂时性死区
执行上下文是理解 JS 作用域、闭包、this 的基础

每一次函数调用都是一次上下文的生命周期。

通过理解 V8 引擎的这套执行机制，我们不仅能解释"奇怪"的 JS 行为，还能写出更健壮、可预测的代码。掌握"编译"与"执行"的分离，是迈向高级 JavaScript 开发的关键一步。