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

在 JavaScript 中，函数是一等公民（First-Class Citizens），既可以作为数值传递，也可以作为返回值返回或动态赋值给变量。日常开发中，定义函数主要有三种方式：函数声明（Function Declaration）、函数表达式（Function Expression）以及 ES6 引入的箭头函数（Arrow Function）。本文将直接梳理这三者的语法特征、底层运行机制（提升机制、作用域与 this 绑定）及适用场景，帮助读者在具体业务开发中作出规范、合理的选择。

一、函数声明（Function Declaration）

函数声明是最传统、最符合直觉的函数定义语法。它使用 function 关键字开头，后接函数名、形参列表以及由大括号包裹的函数体。

// 基础函数声明
function calculateTotal(price, count) {
  return price * count;
}

// 调用函数
const total = calculateTotal(25, 4);
console.log(total); // 输出: 100

1. 函数提升（Hoisting）机制

函数声明最显著的运行时特征是整体提升。在 JavaScript 引擎的代码编译阶段，解析器会优先扫描整个当前作用域，将所有函数声明的名称与其对应的函数体整体提升到作用域顶部。这意味着开发者可以在函数声明语句之前直接调用该函数：

// 可以在定义之前调用
console.log(greet("小明")); // 正常输出: "你好, 小明!"

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

2. 块级作用域下的函数声明

在 ES6 引入块级作用域之前，函数声明在 if、for 等代码块内的表现因浏览器引擎不同而存在兼容性差异。在现代严格模式（'use strict'）下，块级作用域中的函数声明仅在该代码块内部有效，外部无法直接访问。

二、函数表达式（Function Expression）

函数表达式是将一个函数定义作为表达式，赋值给变量、对象属性或数组元素。根据函数是否有名字，函数表达式分为匿名函数表达式和具名函数表达式。

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

// 具名函数表达式 (Named Function Expression, NFE)
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // 可在函数内部通过 fact 自引用
};

1. 提升差异：为什么不能提前调用？

函数表达式的提升遵循变量的提升规则，而不是函数的整体提升：

• 如果使用 var 声明变量，变量名会被提升并初始化为 undefined。在赋值执行前调用，会抛出 TypeError: xxx is not a function。
• 如果使用 let 或 const 声明，变量名会被提升但处于暂存性死区（TDZ, Temporal Dead Zone）。在赋值执行前访问，会直接抛出 ReferenceError: Cannot access 'xxx' before initialization。

2. 具名函数表达式（NFE）的独特性

给函数表达式命名不仅便于递归，在异常报错时还能提供清晰的调用栈名称（Stack Trace），避免在控制台中显示为不易排查的 (anonymous function)：

const handler = function clickHandler(event) {
  // clickHandler 仅在函数体内部作用域可用
  console.log("处理事件: ", event.type);
};

// 外部只能通过变量名 handler 访问
handler({ type: "click" });
// console.log(clickHandler); // 抛出 ReferenceError

三、箭头函数（Arrow Function）

ECMAScript 2015（ES6）引入了箭头函数。它采用 => 操作符，不仅大幅精简了书写语法，更在语义层面做出了根本性的重塑。

1. 语法简写规则

• 单一形参：当只有一个参数时，可以省略包裹参数的圆括号：x => x * 2。
• 表达式简写与隐式返回：当函数体只有一条表达式时，可以省略大括号 {} 与 return 关键字，该表达式的计算结果会自动返回。
• 返回对象字面量陷阱：当隐式返回一个对象字面量时，必须使用圆括号包裹对象，否则引擎会将 {} 误解析为函数体代码块：item => ({ id: item.id, name: item.name })。

2. 核心特性差异与底层限制

箭头函数并不是普通函数的单纯语法糖，它缺少许多普通函数的底层机制：

1. 词法 this 绑定（Lexical this）：箭头函数内部没有自己的 this。它的 this 严格继承自外层普通函数或全局上下文，在定义时即已确定。无论是调用 call()、apply() 还是 bind()，都无法改变箭头函数内部的 this。
2. 没有 arguments 对象：箭头函数内访问 arguments 会沿着作用域链查找外层函数的参数。若需获取所有参数，应使用 ES6 剩余参数语法（Rest Parameters）：(...args) => { /* 处理 args */ }。
3. 不能作为构造函数（无 new 能力）：箭头函数内部没有 [[Construct]] 内部方法，也没有 prototype 属性。使用 new 实例化箭头函数会抛出 TypeError。
4. 不能作为 Generator 函数：箭头函数内部不允许使用 yield 关键字。

四、三种定义方式的特性全览

为了直观掌握三者的差异，下表汇总了语言层面的核心指标：

五、工程实践中的选型原则

在日常业务开发与架构设计中，面对这三种定义方式，应遵循清晰的场景决策：

六、高频陷阱与防坑要点

陷阱 1：在对象字面量方法中误用箭头函数

很多初学者为了追求简洁，会在定义对象的方法时使用箭头函数，导致 this 无法正确指向该对象：

const counter = {
  count: 0,
  // 错误写法：箭头函数的 this 指向外部作用域（如 window 或 module.exports）
  increment: () => {
    this.count++;
  },
  // 正确写法：使用 ES6 对象方法简写（普通函数）
  decrement() {
    this.count--;
  }
};

counter.increment();
console.log(counter.count); // 依然是 0，因为 this.count 被写到了外层

陷阱 2：DOM 事件监听中的 this 绑定

在传统的 DOM 事件监听中，回调函数内的 this 通常会自动绑定为触发事件的 DOM 元素本身。如果传入箭头函数，this 将退化为外层词法环境：

const button = document.querySelector("#submit-btn");

// 若需要 this 指向 button 元素：
button.addEventListener("click", function() {
  this.classList.toggle("active"); // 这里的 this 是 button
});

// 若使用箭头函数，需显式使用 event.currentTarget：
button.addEventListener("click", (event) => {
  event.currentTarget.classList.toggle("active");
});

七、总结

函数声明、函数表达式与箭头函数在 JavaScript 中各有其特定的职责与机制：

• 函数声明：拥有完全提升的特性和清晰的命名，是顶层函数与独立算法模块的首选。
• 函数表达式：生命周期与变量一致，适合条件定义、闭包封装与高阶函数动态求值。
• 箭头函数：以紧凑的语法和词法 this 彻底解决了回调函数中上下文漂移的问题，是现代函数式编程与数组变换的标准工具。

结合三者的运行机制、语法规范及工程限制，按需选取最合适的定义方式，是编写健壮、可读且易于维护的 JavaScript 代码的基础。