JavaScript函数声明、表达式与箭头函数的区别及适用场景

在 JavaScript 日常开发中，定义函数有三种最常见的方式：函数声明（Function Declaration）、函数表达式（Function Expression）以及 ES6 引入的箭头函数（Arrow Function）。很多开发者在编写代码时往往凭直觉或习惯随手混用，但它们在变量提升（Hoisting）行为、this 绑定的时机与指向、构造函数能力以及原型与隐式参数支持上存在本质差异。搞清楚这些差异，不仅能避免 undefined is not a function 或执行上下文丢失等隐蔽问题，还能在编写模块、事件处理器和异步链式调用时选择最精准、稳健的语法。

一、语法形态与变量提升（Hoisting）机制

JavaScript 引擎在执行代码时，分为编译（词法分析与变量环境创建）阶段和代码执行阶段。不同函数定义方式在提升机制上的差异直接决定了函数的调用顺序限制。

1. 函数声明：完整声明与定义的整体提升

函数声明拥有独立的语法结构（以 function 关键字开头并在顶层或块级作用域中声明标识符）。在编译阶段，JavaScript 引擎会将函数名及其完整的函数体一同提升到当前作用域的顶部。

// 正常执行：函数声明在定义前即可安全调用
console.log(calculateTotal(100, 0.1)); // 输出: 110

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

这种特性的优势在于：可以将核心的业务执行逻辑组织在文件上方，而将具体的辅助实现函数放在文件下方，使代码具有自顶向下的清晰脉络。

2. 函数表达式与箭头函数：受限于变量生命周期

函数表达式是将一个匿名（或具名）函数赋值给一个变量；而箭头函数在本质上也是一种函数表达式。两者的提升行为完全依赖于声明该变量的关键字（var、let 或 const）：

• 如果使用 var 声明，仅变量名被提升，其初始值为 undefined。在赋值语句执行前调用，会直接抛出 TypeError: calculateTotal is not a function。
• 如果使用现代规范推荐的 let 或 const 声明，变量虽被登记在词法环境中，但在赋值语句完成前处于暂存性死区（Temporal Dead Zone, TDZ）。在声明前调用会立即抛出 ReferenceError: Cannot access 'calculateTotal' before initialization。

// 错误示例 1：使用 let/const 时的暂存性死区报错
try {
  runTask(); // 抛出 ReferenceError
} catch (e) {
  console.error(e.message);
}

const runTask = () => {
  console.log("Task executed.");
};

// 错误示例 2：使用 var 时的类型错误
console.log(typeof legacyTask); // "undefined"
try {
  legacyTask(); // 抛出 TypeError: legacyTask is not a function
} catch (e) {
  console.error(e.message);
}

var legacyTask = function() {
  console.log("Legacy task.");
};

二、this 绑定机制：动态运行时与词法作用域

在所有语法差异中，this 的指向差异是日常开发中最容易引发逻辑错误的问题。函数声明与普通函数表达式采用动态作用域绑定，而箭头函数采用词法作用域绑定。

1. 普通函数：调用者决定 this

在函数声明和普通函数表达式中，函数内部的 this 是在运行时根据调用方式决定的：

• 方法调用：若通过对象属性调用（如 user.getName()），this 指向该对象。
• 独立函数调用：若直接调用（如 getName()），非严格模式下 this 指向全局对象（window 或 global），严格模式（'use strict'）下为 undefined。
• 显式绑定：可通过 call、apply 或 bind 强制修改其 this 指向。

2. 箭头函数：静态继承外层词法环境

箭头函数没有属于自己的 this。它内部的 this 是在编写代码时确定的，直接继承自该箭头函数被定义时所处的外层作用域（最近的非箭头函数上下文或全局上下文）。

const counter = {
  count: 0,
  
  // 场景 A：使用传统函数作为定时器回调（存在 this 丢失问题）
  startTraditional: function() {
    setTimeout(function() {
      // 这里的 this 不再指向 counter，而是指向 window (非严格) 或 undefined
      console.log("Traditional callback this.count:", this ? this.count : undefined);
    }, 100);
  },

  // 场景 B：使用箭头函数（词法绑定，成功捕获外层 counter）
  startArrow: function() {
    setTimeout(() => {
      // 词法继承自 startArrow 执行时的 this，即 counter 对象
      this.count++;
      console.log("Arrow callback this.count:", this.count);
    }, 100);
  }
};

counter.startTraditional(); // 输出: Traditional callback this.count: undefined
counter.startArrow();       // 输出: Arrow callback this.count: 1

三、构造能力、arguments 对象与原型支持

除了变量提升与 this，在面向对象编程和函数元编程中，三者还在构造器和内部隐藏参数上有显著区分：

1. 是否具备构造能力（Constructor 与 new 操作符）

• 函数声明与普通函数表达式：内部实现了 ECMAScript 规范中的 [[Construct]] 方法，并具备公有属性 prototype。可以使用 new FunctionName() 实例化对象，完成原型链继承。
• 箭头函数：规范明确禁止箭头函数充当构造函数。箭头函数内部没有 [[Construct]] 方法，也没有 prototype 原型属性。使用 new 调用箭头函数会立即抛出 TypeError: ArrowFunc is not a constructor。

2. 参数对象：arguments 与剩余参数（Rest Parameters）

• 函数声明与普通函数表达式：在函数体内部隐式注入了类数组对象 arguments，可直接遍历传入的所有实参。
• 箭头函数：内部不暴露 arguments 对象。如果在箭头函数中访问 arguments，它会沿作用域链向上查找外层普通函数的 arguments（若外层没有普通函数则抛出 ReferenceError）。现代 JavaScript 强烈建议使用标准剩余参数 (...args) => { } 替代旧有的 arguments。

// 传统函数利用 arguments 收集参数
function sumNormal() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

// 箭头函数必须使用剩余参数 (Rest Parameter)
const sumArrow = (...numbers) => {
  return numbers.reduce((acc, curr) => acc + curr, 0);
};

console.log(sumNormal(10, 20, 30)); // 60
console.log(sumArrow(10, 20, 30));  // 60

四、关键差异速查与适用场景选型指南

为便于在工程开发中快速做出技术选型，下表列出了三者的关键特性对比：

明确的适用场景建议

1. 选用函数声明的场景：
   • 模块主干业务函数与导出 API：当编写公共工具库或模块顶层的主函数时，函数声明语义清晰、调试调用栈直观，且允许在代码最顶端先调用、底部实现细节。
   • 需要独立递归或构造实例的传统代码结构。
2. 选用函数表达式的场景：
   • 条件分支按需初始化：需要根据环境配置或运行时判断动态赋予变量不同实现时（例如跨平台兼容适配器）。
   • 立即执行函数（IIFE）：用于创建独立的局部作用域，避免污染全局变量。
   • 闭包封装与私有状态模块。
3. 选用箭头函数的场景：
   • 高阶函数与数组流水线：如 array.map()、array.filter()、array.reduce()，语法简洁、表达直接。
   • 异步流程与回调函数：Promise.then()、setTimeout、网络请求回调等，能天然解决 this 丢失问题，省去 bind(this) 或 const that = this 的繁琐样板代码。

五、工程实践总结

现代 JavaScript 开发并不提倡盲目追求单一语法形式，而是遵循清晰的职责划分：

• 在模块文件顶层组织核心功能时，优先使用函数声明，代码结构自然、调用不受顺序限制。
• 在处理数组转换、Promise 链、事件回调及需穿透传递 this 上下文时，坚决使用箭头函数，保持代码精炼且无额外 this 困扰。
• 在编写类实例方法、对象字面量方法或具有动态调用主体（如事件驱动系统）的代码时，使用标准方法简写或普通函数表达式，确保上下文符合面向对象与事件绑定的预期。