JS函数声明与函数表达式的语法区别及提升特性

在 JavaScript 开发中，定义函数最常用的两种途径是“函数声明”（Function Declaration）与“函数表达式”（Function Expression）。尽管两者最终都能创建可供调用的函数对象，但 JavaScript 引擎在解析语法结构和处理内存提升（Hoisting）时遵循截然不同的规则。理解这些差异，是规避运行时报错、编写健壮模块代码的关键基础。

一、核心语法形态与解析规则区别

JavaScript 语法分析器通过当前代码所处的上下文位置，来界定一个以 function 开头的结构究竟属于语句还是表达式。

1. 函数声明（Function Declaration）

函数声明是一条独立的执行语句（Statement）。它必须具备函数名，且不能直接出现在任何表达式允许的位置（如赋值语句右侧、圆括号运算内或实参传递中）：

// 这是一个标准的函数声明
function calculateTotal(price, taxRate) {
  return price * (1 + taxRate);
}

函数声明在 JavaScript 语法树中属于顶级语句或块级作用域语句，其标识符名称会自动注册到当前执行上下文的环境记录中。

2. 函数表达式（Function Expression）

当 function 关键字作为更大表达式的一部分出现时（例如赋值运算的右侧、逻辑运算的参与项或自执行结构），引擎会将其解析为函数表达式：

// 匿名函数表达式
const calculateTotal = function(price, taxRate) {
  return price * (1 + taxRate);
};

// 命名函数表达式 (Named Function Expression, NFE)
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // fact 仅在函数体内部可见
};

函数表达式可以是匿名的，也可以是命名的。对于命名函数表达式，其名称仅被绑定在函数的局部作用域中，外部无法直接访问 fact，常用于递归调用或调试调用栈标记。

二、提升特性（Hoisting）的底层执行机制

JavaScript 脚本在宿主引擎中并非纯粹的逐行解释执行，而是分为“编译创建期”（Creation Phase）与“运行时执行期”（Execution Phase）。提升特性的本质，是引擎在编译阶段对当前环境记录（Environment Record）中标识符的预先装配行为。

1. 函数声明的“整体提升”

在编译创建阶段，引擎扫描到函数声明时，不仅会在环境记录中为该函数名创建绑定，还会立即在内存堆中创建对应的函数对象，并将标识符直接指向该函数引用。因此，当进入执行阶段后，即便调用语句位于定义之前，引擎也能在环境记录中解析出完整的函数实体并正常执行。

2. 函数表达式的“变量提升分化”

对于函数表达式，函数对象的创建和赋值动作发生在代码执行到赋值操作符那一刻。在编译阶段，引擎只对承载函数的变量名应用对应的变量提升规则：

• 使用 var 声明： 变量名在编译期被注册，并初始化为 undefined。若在赋值前调用，等价于尝试执行 undefined()，直接抛出 TypeError: ... is not a function。
• 使用 let 或 const 声明： 变量名在编译期被注册，但在执行流到达声明语句之前保持“未初始化”（Uninitialized）状态，此时该标识符处于暂存性死区（Temporal Dead Zone, TDZ）。若在此时访问或调用，将抛出 ReferenceError: Cannot access '...' before initialization。

三、前置调用场景下的报错表现与机理剖析

为了直观观察不同提升规则对实际代码的影响，我们可以对比以下三种典型的前置调用用例及其抛出的异常类型：

1. 函数声明的前置调用（正常执行）

// 示例 1：在声明语句前调用
greet("Alice"); // 成功输出: "Hello, Alice!"

function greet(name) {
  return "Hello, " + name + "!";
}

在编译期，greet 已成功与函数内存地址建立绑定，因此调用在语法与语义上均合法。

2. var 函数表达式的前置调用（TypeError 陷阱）

// 示例 2：使用 var 定义函数表达式
greet("Bob"); // 抛出异常: Uncaught TypeError: greet is not a function

var greet = function(name) {
  return "Hello, " + name + "!";
};

很多初学者误以为使用 var 声明不会提升。事实上，标识符 greet 确实提升到了作用域顶端，但它的值是 undefined。调用 undefined() 违背了可调用契约，因此触发 TypeError。

3. const / let 函数表达式的前置调用（ReferenceError 与 TDZ）

// 示例 3：使用 const 定义函数表达式
greet("Charlie"); // 抛出异常: Uncaught ReferenceError: Cannot access 'greet' before initialization

const greet = function(name) {
  return "Hello, " + name + "!";
};

在 ES6 中，const 和 let 同样具有词法层面的提升，但引擎禁止在声明执行语句之前读取或调用该标识符，这段时间被称为暂存性死区（TDZ），调用会触发明确的 ReferenceError。

4. 同名声明冲突中的覆盖优先级

当同一个作用域内同时存在同名的函数声明与 var 变量声明时，提升机制会表现出特殊的优先级排序：

console.log(typeof task); // 输出: "function"

var task = "completed";

function task() {
  return "in progress";
}

console.log(typeof task); // 输出: "string"

在编译期，函数声明优先于变量声明被提升并绑定实体。随后的 var task 由于已被函数占位，不会重复初始化为 undefined。但进入执行阶段后，task = "completed" 执行实际赋值，覆盖了原有的函数引用，导致类型变为 string。

四、条件分支与块级作用域下的行为差异

在早期 ECMAScript 规范中，将函数声明写在 if 或 while 代码块内属于未定义行为（Undefined Behavior），不同浏览器引擎给出了彼此冲突的实现。

// 错误模式：在条件块中滥用函数声明（跨环境存在兼容风险）
if (isProduction) {
  function getEndpoint() { return "https://api.prod.com"; }
} else {
  function getEndpoint() { return "https://api.dev.com"; }
}

// 推荐做法：通过 const + 函数表达式或箭头函数进行条件绑定
let getEndpoint;
if (isProduction) {
  getEndpoint = () => "https://api.prod.com";
} else {
  getEndpoint = () => "https://api.dev.com";
}

五、选型原则与工程最佳实践

在现代化前端与 Node.js 工程中，选择函数定义形式通常遵循以下决策路径：

总结对比表

掌握函数声明与函数表达式的差异，不仅有助于消除由提升陷阱带来的代码缺陷，更能让团队在代码组织结构与 API 表达意图上达成清晰、统一的工程共识。