JavaScript函数声明与表达式的区别：提升机制与作用域解析

在JavaScript开发中，定义一个函数最常用的两种方式是函数声明（Function Declaration）与函数表达式（Function Expression）。这两者在常规调用时的产出看似一致，但在底层的执行上下文准备、变量提升行为、以及标识符在作用域中的可见范围上存在本质区别。理解两者的分水岭，不仅能解释诸如“为什么函数未声明前可以调用而变量却报错”的经典疑问，也是掌握现代ES6+词法环境与暂时性死区（TDZ）的必经之路。本文将从语法形态、编译提升机制、作用域绑定以及工程实践四个维度进行系统解析。

一、语法形态与解析方式的本质差异

JavaScript引擎在词法分析阶段就能区分语句（Statement）与表达式（Expression）。函数声明作为一条独立的语法语句存在，其必须包含函数名，且不能直接出现在要求求值的表达式上下文中；而函数表达式则是把一个函数体作为右值赋给变量，或者作为参数传递给其他函数。

// 1. 函数声明（必须拥有函数标识符，作为独立语句）
function calculateTotal(price, tax) {
  return price * (1 + tax);
}

// 2. 匿名函数表达式（作为赋值表达式的右值）
const getDiscount = function(rate) {
  return rate * 0.9;
};

// 3. 具名函数表达式（Named Function Expression，NFE）
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // fact 仅在函数内部作用域有效
};

这种语法形态的差异直接决定了解析时机：函数声明在脚本或函数作用域编译之初就被预先处理并初始化，而函数表达式必须等到代码运行到赋值语句所在的行时，才会执行实际的函数对象实例化与绑定。

图1：函数声明与函数表达式的语法形态与核心特性对照

二、提升机制（Hoisting）的运行时深度剖析

JavaScript并非传统的纯解释型语言，而是采用即时编译（JIT）机制。当进入一个执行上下文时，引擎会经历两个主要阶段：创建阶段（Creation Phase）与执行阶段（Execution Phase）。函数声明与表达式在此阶段的处理有着根本性的分化。

1. 函数声明的“完全提升”

在创建阶段，引擎扫描当前作用域中的所有声明。遇到函数声明时，不仅会在环境记录（Environment Record）中注册该函数名，还会立即在内存堆中创建对应的函数对象，并将其指针直接赋给该标识符。因此，在实际代码执行之前，该函数已经处于“已初始化且可调用”状态。

// 正常运行：打印 "Hello from hoisted declaration"
greet();

function greet() {
  console.log("Hello from hoisted declaration");
}

2. 函数表达式的变量提升与暂时性死区

当通过变量声明来承载函数表达式时，提升行为完全受制于宿主变量的关键字类型（var、let 或 const）：

• 使用 var：变量名被提升，但在创建阶段默认初始化为 undefined。如果在赋值语句之前调用它，将抛出 TypeError: ... is not a function，因为此时该变量的值是 undefined 而非可调用的函数。
• 使用 let 或 const：变量名在创建阶段被记录在词法环境中，但未被初始化。从作用域开始到变量实际声明并赋值的位置，这段区域被称为暂时性死区（Temporal Dead Zone, TDZ）。在此期间访问该变量会直接抛出 ReferenceError: Cannot access '...' before initialization。

// 报错: TypeError: sayHi is not a function
// 原因: var 提升仅将 sayHi 初始化为 undefined
sayHi(); 
var sayHi = function() {
  console.log("Hi");
};

// 报错: ReferenceError: Cannot access 'sayHello' before initialization
// 原因: const 声明处于暂时性死区 (TDZ)
sayHello();
const sayHello = function() {
  console.log("Hello");
};

图2：JavaScript 引擎在创建阶段与执行阶段处理提升的内部流程

三、作用域绑定与标识符可见性机制

除了提升时机的不同，两者在作用域内的标识符绑定行为也存在两个极易被混淆的边界：具名函数表达式（NFE）的自引用作用域，以及ES6严格模式下的块级作用域行为。

1. 具名函数表达式（NFE）的作用域隔离

当给函数表达式添加一个名字时，例如 const compute = function helper() { ... }：

• 外部作用域只拥有 compute 变量的访问权。在外部调用 helper() 会抛出 ReferenceError。
• JavaScript引擎会在该函数内部隐式创建一个专属的词法环境记录，将 helper 绑定在其中。该标识符是只读且不可重写的，主要用于在函数体内部实现安全的递归调用和在错误堆栈（Stack Trace）中提供清晰的函数标识。

const counter = function run(count) {
  if (count <= 0) {
    console.log("Done");
    return;
  }
  console.log("Current:", count);
  // run 在自身内部作用域可见且可调用
  run(count - 1); 
};

counter(2); // 正常输出
// 报错: ReferenceError: run is not defined
console.log(typeof run);

2. 块级作用域（Block Scope）中的函数声明行为

在ES5之前，ECMAScript规范明确规定函数声明只能出现在全局作用域或函数作用域顶层，不能出现在 if、for 等代码块内部。然而各浏览器厂商实现存在历史兼容性差异。

在ES6规范中，引入了块级作用域后明确规定：在严格模式（'use strict';）下，块内函数声明被限制在该块的作用域内部，其提升仅到达该代码块的顶部，外部完全不可见；而在非严格模式下，出于向下兼容考虑（Annex B），行为较为复杂，因此在现代代码规范中，严禁在条件语句块内使用函数声明，统一推荐使用 const 声明的函数表达式。

图3：具名函数表达式（NFE）与块级作用域下的标识符可见性机制

四、对比与工程选型建议

在日常业务开发与大型团队协作中，选用函数声明还是函数表达式往往关乎代码的可读性、调用顺序的一致性以及潜在副作用的规避。以下是两种方式的核心对比：

图4：函数声明与函数表达式在工程实践中的决策总结树

总结

函数声明与函数表达式的核心差异源自底层引擎对语法结构的分类对待。函数声明在创建阶段经历整体提升，适合于模块顶层核心API的构建；而基于 const 或 let 的函数表达式受暂时性死区约束，具备“先声明后使用”与不可误重写的安全特征，更契合现代模块化工程规范。掌握执行上下文、提升阶段与词法作用域细节，能帮助开发者写出结构清晰且不易出错的高质量JavaScript代码。