现代JavaScript开发中何时优先使用函数声明？

虽然 ES6 普及后箭头函数（Arrow Functions）几乎成为了多数开发者随手书写的默认习惯，但在现代 JavaScript 和大型 TypeScript 业务架构中，使用 function 关键字定义的函数声明（Function Declaration）依然具有不可替代的结构性与语义价值。明确何时使用函数声明，不仅能让模块主次脉络清晰，还能显著提升代码的可读性、可测试性与调试体验。

一、核心认知：函数声明与箭头函数的关键差异

在做选型决策前，必须先厘清函数声明与函数表达式（尤其是箭头函数）在运行机制与语法特性上的四个本质差异：

• 提升机制（Hoisting）：函数声明会连同函数体一起被提升到所在作用域的顶部；而由 const 声明的箭头函数存在暂时性死区（TDZ），必须在声明行执行之后才能被调用。
• 上下文绑定（this）：函数声明拥有自己的动态 this 上下文，受调用方式决定；箭头函数不产生自己的 this，它词法绑定于外层作用域。
• 构造与原型能力：函数声明拥有 prototype 原型属性，可用作构造器（new）；箭头函数轻量化设计，没有 prototype，也不能用作构造函数或生成器。
• 调试标识（Name 属性与调用栈）：函数声明天生具备内建具名标识，在调用栈追踪（Call Stack Trace）与性能分析器（Profiler）中展示极其直观明确。

图 1：函数声明与箭头函数在运行特性与适用场景上的结构对照

二、优先使用函数声明的典型场景

1. 模块顶级主要业务函数与对外导出接口

当一个模块对外提供公共 API 或包含核心工作流时，使用函数声明可以让模块的主次层次分明。更重要的是，它支持著名的“由上至下（Top-Down）”报纸式阅读模式。

在阅读报纸时，读者习惯先看到大标题与核心段落，随后若有兴趣再向下查阅技术细节。由于函数声明具有提升能力，我们可以将高层调度的入口函数放在文件前部，而将一系列细分解析、校验等辅助函数放在文件底部：

// 推荐：高层核心流程放在文件顶部，一目了然
export function processOrder(orderId, paymentInfo) {
  const order = fetchOrderRecord(orderId);
  validatePayment(order, paymentInfo);
  return dispatchDelivery(order);
}

// 具体辅助工具放在底部，不需要抢占读者的第一视觉注意力
function fetchOrderRecord(id) {
  // 数据库或接口获取逻辑
  return { id, total: 100 };
}

function validatePayment(order, payment) {
  // 校验逻辑
}

function dispatchDelivery(order) {
  // 派送逻辑
}

如果全部换成 const processOrder = () => ...，由于无法在定义前调用，开发者被迫把最底层的微小辅助工具写在文件最上方，把核心业务逻辑挤在文件最后一行，阅读体验极不自然。

图 2：依赖提升机制实现的直观报纸式代码流 vs TDZ 强制倒序排列

2. 递归操作与互递归逻辑

在处理树形结构、抽象语法树（AST）遍历或相互调用的图算法时，函数声明拥有最稳固的名称绑定和提升优势：

// 互递归解析示例：表达式与因子相互调用
function parseExpression(tokens) {
  const left = parseFactor(tokens);
  if (tokens.peek() === '+') {
    tokens.next();
    return { type: 'Add', left, right: parseExpression(tokens) };
  }
  return left;
}

function parseFactor(tokens) {
  if (tokens.peek() === '(') {
    tokens.next();
    const expr = parseExpression(tokens); // 互递归调用
    tokens.expect(')');
    return expr;
  }
  return { type: 'Literal', value: tokens.next() };
}

如果在此处使用 const 箭头函数，在 parseExpression 声明并求值时，parseFactor 还未初始化，代码会在运行时立即抛出 ReferenceError: Cannot access 'parseFactor' before initialization。

3. TypeScript 中的函数重载（Function Overloads）

在静态类型检查中，TypeScript 的函数重载语法天然与函数声明结合：

// 声明多种重载签名
function getElement(id: string): HTMLElement;
function getElement(index: number): HTMLElement | null;
// 统一实现
function getElement(param: string | number): HTMLElement | null {
  if (typeof param === 'string') {
    return document.getElementById(param);
  }
  return document.body.children[param] || null;
}

虽然通过类型别名或接口也可以给箭头函数写调用签名，但语法冗长晦涩，远不如函数声明直观原生。

三、何时该退让给箭头函数或表达式？

优先使用函数声明并不等于“处处都用函数声明”。现代开发提倡分工明确、各司其职：

图 3：团队开发中的函数语法选型推导流程

四、工程落地的具体落地步骤与注意事项

要在现有工程中统一并优化函数风格，建议按以下三步渐进式落地：

1. 确立代码分层约定：在团队编码规范中约定“顶级逻辑用函数声明，内联回调与匿名逻辑用箭头函数”。
2. 配置 ESLint 规则引导：配置 func-style 规则（如 ["error", "declaration", { "allowArrowFunctions": true }]），允许内联使用箭头函数的同时，防止把独立函数机械地写为 const foo = () => {}。
3. 保持重构中的谨慎：在从箭头函数向函数声明迁移时，检查函数体内是否有依赖闭包捕获 this 或 arguments 的地方，避免引入意外的上下文漂移。

图 4：现代代码架构中函数声明的核心价值归纳