JavaScript函数定义的三种方式：声明、表达式与箭头函数

一、函数声明：语法、完整提升与适用场景

函数声明是最经典、最直观的函数定义方式。其基本语法结构使用 function 关键字开头，后紧随函数标识符、参数列表及函数体代码块：

// 函数声明示例
function calculateArea(width, height) {
  return width * height;
}

const area = calculateArea(10, 5);
console.log(area); // 输出: 50

1. 核心特征：完整的函数提升（Function Hoisting）

函数声明具备一个由 JavaScript 引擎执行机制决定的重要特性：声明与定义整体提升。在 JavaScript 引擎解析脚本或进入函数作用域时，会经历两个基本阶段：

• 编译/创建阶段（Creation Phase）： 引擎在词法环境中登记所有声明。对于函数声明，引擎不仅登记函数名，还会直接在内存中分配完整的函数对象并将函数名绑定到该对象上。
• 代码执行阶段（Execution Phase）： 逐行执行语句。因此，即使调用语句在代码书写顺序上位于函数声明之前，也能正常执行，完全不会抛错。

// 可以在定义代码之前安全调用
const message = getWelcomeText("开发者");
console.log(message); // 输出: "你好，开发者！"

function getWelcomeText(userName) {
  return `你好，${userName}！`;
}

2. 拥有独立的动态 this 与 arguments 支持

使用函数声明创建的函数具备自身独立的执行上下文。函数执行时的 this 采用动态绑定机制，完全取决于函数被调用的具体方式（例如作为对象方法被调用时指向该对象，直接调用时指向全局对象或处于严格模式下的 undefined）。

此外，函数体内部天然拥有类数组对象 arguments，可读取所有传入的实参；函数本身也是一等公民的构造函数，具备 prototype 属性，可以使用 new 关键字实例化。

二、函数表达式：变量绑定、按序加载与作用域控制

函数表达式将一个匿名函数（或具名函数）作为一个右值表达式，赋值给一个使用 const、let 或 var 声明的变量：

// 匿名函数表达式
const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 输出: 20

1. 遵循变量的生命周期与暂时性死区（TDZ）

与函数声明不同，函数表达式本质上是一条赋值语句。虽然变量声明会被登记，但函数对象的创建与赋值严格发生在执行流到达该行代码之时：

• 若使用现代标准的 const 或 let 声明，在执行赋值语句之前访问该变量，会触发暂时性死区（Temporal Dead Zone, TDZ），抛出 ReferenceError: Cannot access 'multiply' before initialization。
• 若使用传统的 var 声明，变量会被初始化为 undefined。在赋值之前调用它，会抛出 TypeError: multiply is not a function。

// 错误示例：提前调用表达式会导致报错
try {
  greet("张三"); // 抛出错误
} catch (err) {
  console.error(err.message); // ReferenceError: Cannot access 'greet' before initialization
}

const greet = function(name) {
  return `欢迎，${name}`;
};

2. 具名函数表达式（Named Function Expression）

在定义函数表达式时，除了使用匿名函数外，还可以在 function 后指定一个内部名称。这个内部名称仅在函数体自身的作用域内可见，外部无法直接访问。

// 具名函数表达式
const factorial = function compute(n) {
  if (n <= 1) return 1;
  return n * compute(n - 1); // 内部可以使用 compute 进行自递归
};

console.log(factorial(5)); // 输出: 120
// console.log(compute(5)); // 外部访问将抛出 ReferenceError: compute is not defined

具名函数表达式的价值在于两个方面：一是使内部递归调用不再脆弱地依赖外部变量名；二是当发生异常时，调用栈追踪（Stack Trace）能够输出明确的函数名 compute，大幅提升调试效率。

三、箭头函数：ES6 极简语法与词法 this 绑定

ECMAScript 6（ES2015）正式引入了箭头函数（Arrow Function）。它提供了一种更具表现力的轻量级函数书写方式，并彻底解决了 JavaScript 历史上长期困扰开发者的 this 动态指向混淆问题：

// 基础箭头函数
const add = (a, b) => {
  return a + b;
};

// 单表达式简写：省略大括号与 return 关键字（隐式返回）
const quickAdd = (a, b) => a + b;

// 单参数简写：省略参数括号
const square = x => x * x;

console.log(quickAdd(3, 7)); // 输出: 10
console.log(square(6));      // 输出: 36

1. 词法作用域 this 绑定（Lexical this）

传统普通函数的 this 是动态的，取决于谁在调用它。这在异步回调、事件监听器和定时器中经常导致 this 意外丢失或指向错误对象（例如在 setTimeout 中变成 window 或 undefined），以前开发者不得不通过 var self = this 或 .bind(this) 来变通解决。

箭头函数从底层设计上没有自身的 this 内部插槽。它在执行时会直接像查找普通变量一样，穿透当前作用域，沿着词法作用域链向外层查找，直接沿用外层包裹环境的 this：

// 典型场景：保持外部组件实例的 this
const timerWidget = {
  seconds: 0,
  start() {
    // 传统普通函数在此处会导致 this 变成全局对象
    // 使用箭头函数，this 词法继承外层 start() 的上下文（即 timerWidget）
    setInterval(() => {
      this.seconds++;
      console.log(`运行秒数: ${this.seconds}`);
    }, 1000);
  }
};

2. 箭头函数的底层限制与注意事项

由于箭头函数的内部结构极度轻量化，ECMAScript 规范明确规定了以下严格限制：

• 不能作为构造函数（无法使用 new）： 箭头函数内部没有 [[Construct]] 方法，也没有 prototype 原型对象。执行 new (() => {}) 会立即抛出 TypeError: ... is not a constructor。
• 不绑定 arguments 对象： 箭头函数内部访问 arguments 会获取到外层函数的 arguments。在箭头函数中获取实参列表应使用 ES6 的剩余参数（Rest Parameters）：(...args) => { ... }。
• 无法通过 call()、apply()、bind() 更改 this： 对箭头函数调用这些方法时，传入的第一个上下文参数会被静默忽略，不会改变其词法绑定的指向。
• 不适合作为对象字面量的方法： 在对象字面量中直接用箭头函数定义方法时，外层词法作用域通常是全局作用域或模块作用域，而不是该对象本身。

// 常见误区：在对象方法中误用箭头函数
const counter = {
  count: 0,
  increment: () => {
    // 这里的 this 并不是 counter，而是模块全局上下文
    this.count++; // 无法修改 counter.count
  }
};

counter.increment();
console.log(counter.count); // 依然输出: 0

四、工程实战：决策推导与核心特性全景对比

为了帮助开发者在实际工程中形成直观的肌肉记忆，我们可以通过清晰的逻辑推导流程图与多维矩阵来指导代码选型。

核心特性对照表

下表完整汇总了三种函数定义方式在语言层面的关键指标差异：

五、开发建议与选型黄金准则

在现代前端工程（如 React、Vue3、Node.js 服务端以及纯 TypeScript 开发）中，合理组合使用这三种方式能显著提升代码的可读性与健壮性：

1. 回调函数与高阶函数优先选用箭头函数： 无论是在 Array.prototype.map、filter 等数据流处理中，还是在 Promise 链式调用和事件轮询中，箭头函数凭借极简的语法和天然的词法 this 继承，是首选方案。
2. 模块导出的顶级通用纯函数优先选用函数声明： 声明方式语义明确、可读性高，免去了提升阶段报错的隐患，允许主逻辑放在代码文件上部，工具函数实现置于底部。
3. 需要动态上下文或作为对象内部方法时使用普通函数： 在 Vue2 选项式 API 的 methods 中，或者在原生 DOM 事件回调需要 this 访问事件触发节点（event.currentTarget）时，必须使用普通函数声明或函数表达式。
4. 避免滥用箭头函数定义原型链方法： 如果在原型对象（Prototype）上扩展通用方法，切勿使用箭头函数，否则实例方法中的 this 将无法正确指向调用它的具体对象实例。