JavaScript函数提升机制：声明与表达式的执行顺序区别

一、JavaScript 引擎的两段式执行机制

很多开发者直觉上认为 JavaScript 是逐行自上而下解释执行的脚本语言。然而，当一段代码在当前作用域被运行前，JavaScript 引擎会将其分为两个明确的阶段：编译（创建环境记录）阶段与代码执行阶段。

提升（Hoisting）并非真实物理移动了源代码的位置，而是 JavaScript 引擎在编译阶段解析语法树时，提前在当前环境记录（Environment Record）中为标识符分配了内存空间。对函数和变量的不同定义方式，决定了它们在编译阶段被赋予的初始状态。

图 1：JavaScript 引擎编译与执行两阶段的处理机制与调用结果

二、函数声明的提升行为与执行特点

函数声明（Function Declaration）具有如下标准的语法形式：以关键字 function 开头，必须包含函数名，且独立成行作为一条声明语句存在。

// 开发者书写的代码
calculateTotal(100, 0.2); // 输出 120，调用成功！

function calculateTotal(price, taxRate) {
  return price * (1 + taxRate);
}

在代码进入执行阶段前，引擎在编译阶段扫描到了 calculateTotal 函数声明。引擎直接在当前环境记录中创建了该标识符，并立即在堆内存中创建了对应的函数对象，将其指针赋给该标识符。

因此，当引擎从第一行开始执行 calculateTotal(100, 0.2) 时，该标识符不仅已经存在，而且已经指向一个可执行的函数实体。

同名函数声明的覆盖规则

如果同一个作用域中声明了多个同名的函数，后出现的声明会在编译阶段完全覆盖先前的声明。如下示例所示：

showNotification(); // 输出: "版本 2.0"

function showNotification() {
  console.log("版本 1.0");
}

function showNotification() {
  console.log("版本 2.0");
}

在执行阶段开始前，第二个 showNotification 的函数定义就已经替换了第一个定义，因此无论在代码哪个位置调用，得到的都是后者的逻辑。

三、函数表达式的提升行为与执行陷阱

与函数声明不同，函数表达式（Function Expression）是将一个匿名或具名函数作为一个表达式值，赋值给某个变量标识符。例如：

var printReport = function() {
  console.log("生成报表数据");
};

在语法解析上，这条语句的核心是变量声明与赋值表达式。JavaScript 引擎的提升规则在此只针对左侧的变量，而不会对右侧的函数字面量做提前绑定。

1. 使用 var 声明的函数表达式：TypeError 陷阱

// 尝试在赋值之前调用
renderChart(); // 抛出异常：TypeError: renderChart is not a function

var renderChart = function() {
  console.log("图表渲染完成");
};

为什么抛出的是 TypeError 而不是 ReferenceError？这是因为 var renderChart 在编译阶段被提升，且默认初始化为 undefined。当执行到 renderChart() 时，引擎在作用域中能找到 renderChart 变量，它的当前值是 undefined。尝试对 undefined 执行函数调用运算符 ()，就会触发类型错误：undefined 不是一个函数。

2. 使用 let / const 声明的函数表达式：TDZ 与 ReferenceError

// 尝试在声明语句前调用
formatCurrency(50); // 抛出异常：ReferenceError: Cannot access 'formatCurrency' before initialization

const formatCurrency = (amount) => {
  return "¥" + amount.toFixed(2);
};

使用现代 ES6 的 let 或 const 声明函数时，提升行为有了质的改变：

• 编译阶段：引擎在词法环境中登记了 formatCurrency 这个标识符，但严禁访问，也不会初始化为 undefined。
• 从进入作用域到执行到 const formatCurrency = ... 这行代码之间的区域，被称为暂时性死区（Temporal Dead Zone, TDZ）。
• 在 TDZ 内任何对该标识符的读取或调用，都会直接抛出 ReferenceError。

图 2：不同声明方式在作用域初始化与调用结果上的核心差异

四、执行顺序推导：代码书写 vs 引擎实际解析

为了透彻理解两者的执行顺序区别，我们通过一段包含函数声明、var 函数表达式与普通变量混合的经典案例，详细拆解从源码书写到引擎执行的全过程。

// 开发者书写的代码
console.log(typeof sampleFn); // 输出 1

var sampleFn = "普通文本数据";

function sampleFn() {
  return "来自函数声明的结果";
}

console.log(typeof sampleFn); // 输出 2

很多开发者容易误判两次 console.log 的结果。让我们将引擎在内部的处理逻辑分步还原：

图 3：同名声明与变量赋值推导过程与变量值流转

五、ES6 块级作用域下的函数声明边界

在 ES5 及更早的规范中，函数声明只能在全局或函数顶级作用域中存在，块级语句（如 if、for 等代码块）中包含函数声明在规范上是不允许的，但各大浏览器实现了不同且不兼容的兼容模式。

ES6 引入块级作用域后，对块内部的函数声明制定了严格标准：

• 标准规范：在块级作用域内部声明的函数，其作用域仅限制在该块内部，行为类似于 let。
• Web 浏览器兼容性妥协（B 附录）：为了兼容旧网页，浏览器引擎将块内函数声明的标识符作为类似 var 的存在向外部函数/全局作用域提升一个初值为 undefined 的变量，但真正的函数实体仅在进入代码块后才会赋值。

六、总结与异常排查决策路径

在实际项目开发中，当遇到 TypeError: xxx is not a function 或 ReferenceError: Cannot access 'xxx' before initialization 时，可以参照以下决策路径进行快速排查：

图 4：函数调用与报错决策排查及重构规范指引

七、核心要点清单

1. 本质区别：函数声明在编译阶段完成标识符与函数体双重绑定，具备整体提升能力；函数表达式遵循变量提升规则，函数体本身只在执行阶段赋值。
2. 错误区分：对提前调用的 var 函数表达式执行操作，由于变量当前值已为 undefined，产生 TypeError；而对 let/const 声明的函数表达式提前调用，由于变量仍位于 TDZ 中，产生 ReferenceError。
3. 声明优先级：当同名函数声明与同名 var 变量声明在同一作用域共存时，函数声明提升优先，但后续执行阶段的变量显式赋值操作会将其覆写。