JS函数声明和函数表达式有什么区别？

在 JavaScript 中，函数声明（Function Declaration）与函数表达式（Function Expression）的核心区别在于解析时机与变量提升（Hoisting）机制：函数声明在代码解析阶段就会被完整提升，允许在声明语句之前调用；而函数表达式作为赋值语句的一部分，在代码逐行执行到该位置时才完成初始化，如果在赋值之前调用，会根据声明方式抛出引用错误或类型错误。理解两者的语法结构、运行时生命周期和作用域边界，是写出健壮代码的基础。

一、语法形式与结构定义的差异

从语法外观上看，两者都使用 function 关键字，但它们在 JavaScript 语法树中承担着完全不同的角色。函数声明是一条独立的结构化语句，必须包含函数名称；而函数表达式则是把函数作为一个求值对象（右值），赋给某个变量、对象属性，或者直接作为参数传递。

1. 函数声明的语法规则

函数声明以 function 关键字作为语句首部，必须紧跟函数名称、参数列表和函数体块。因为它是一条完整的语句，不需要跟赋值操作符配合：

// 这是一个函数声明
function add(x, y) {
  return x + y;
}

2. 函数表达式的语法形态

函数表达式把函数视为“第一类公民”（First-class Object），将函数字面量赋值给一个变量。函数表达式可以是匿名的，也可以附带名称，甚至可以使用 ES6 引入的箭头函数语法：

// 匿名函数表达式
const add = function(x, y) {
  return x + y;
};

// 具名函数表达式（NFE）
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

// 箭头函数表达式
const multiply = (x, y) => x * y;

二、提升机制（Hoisting）与执行生命周期

提升机制是两者在实际运行中最关键的行为分水岭。JavaScript 引擎在执行一段代码前，会先经历编译（语法分析与执行上下文创建）阶段，再进入逐行解释执行阶段。

1. 函数声明的完全提升

对于函数声明，JavaScript 引擎在预编译期会把函数名和函数体一起提升到当前作用域的顶部。因此，即使把调用语句写在定义的前面，程序也能正常工作：

// 正常运行，输出: "success"
const result = runTask();

function runTask() {
  return "success";
}

2. 函数表达式遵循变量的生命周期

当使用函数表达式时，等号左边是一个变量声明。它遵循的是该变量声明方式（const、let 或 var）的提升规则：

• 使用 const 或 let：变量存在提升，但在代码执行到具体声明行之前，该变量处于“暂时性死区”（Temporal Dead Zone, TDZ）。在此期间访问或调用它，会直接抛出 ReferenceError: Cannot access 'fn' before initialization。
• 使用 var：变量名被提升，但其默认初始值为 undefined。如果试图在赋值前调用它，因为 undefined 不是可执行的函数，会抛出 TypeError: fn is not a function。

// 示例 1: const/let 触发暂时性死区
try {
  loadData(); // ReferenceError
} catch (e) {
  console.log(e.name); // "ReferenceError"
}
const loadData = function() {
  return "data loaded";
};

// 示例 2: var 提前调用引发类型错误
try {
  fetchUser(); // TypeError: fetchUser is not a function
} catch (e) {
  console.log(e.name); // "TypeError"
}
var fetchUser = function() {
  return { id: 1 };
};

三、作用域控制与动态应用场景

除了提升时机，两者在作用域表现、条件分支和高阶函数中的应用方式也存在显著差别。

1. 条件分支中的表现

在 ES6 之前，规范并不允许在 if 等控制语句块内书写函数声明。现代浏览器在 ES6 下为块级函数声明提供了支持，但各家引擎在非严格模式下的兼容策略非常复杂且历史包袱重，容易产生怪异的变量提升行为。

如果需要根据条件切换不同的函数逻辑，必须使用函数表达式：

// 推荐做法：使用函数表达式配合 let 或 const
let formatOutput;

if (process.env.NODE_ENV === "production") {
  formatOutput = function(data) {
    return JSON.stringify(data);
  };
} else {
  formatOutput = function(data) {
    return JSON.stringify(data, null, 2);
  };
}

2. 具名函数表达式（NFE）的作用域封闭性

当为函数表达式赋予内部名称时（如 const fn = function myInnerName() {}），这个 myInnerName 仅在函数内部作用域中有效，在外部作用域是无法直接访问的。这一特性非常适合实现函数自递归，以及在错误调用栈中保留清晰的函数名便于定位：

const countSteps = function step(current, target) {
  if (current >= target) {
    return current;
  }
  // 可以在内部直接递归调用 step
  return step(current + 1, target);
};

countSteps(1, 5); // 正常输出 5
// console.log(typeof step); // 抛出 ReferenceError: step is not defined

四、选型建议与常见陷阱规避

为了在工程协作中保持代码风格的一致性与可预测性，团队通常需要明确何时使用声明、何时使用表达式。

实战场景总结

可以遵循以下两条明确规则选择函数的定义形式：

1. 使用函数声明的情况：定义一个在模块内部通用的主流程逻辑或工具函数，且希望把调用代码放在文件上方、实现细节放在文件下方，利用提升特性获得自上而下的阅读体验。
2. 使用函数表达式的情况：需要将函数作为参数传递给其他方法（如 array.map() 或 Promise 链式调用）、需要基于运行期变量动态决定函数逻辑，或者希望借助 const 强约束确保该函数在后续代码中不被重写。