JavaScript中定义函数的三种主要方式

在日常 JavaScript 开发中，定义函数最核心且高频使用的三种方式分别是：函数声明（Function Declaration）、函数表达式（Function Expression）以及 ES6 引入的箭头函数（Arrow Function）。三者虽然都能封装一段可复用的逻辑代码，但在提升机制（Hoisting）、上下文绑定（this 指向）、构造调用能力（new 与原型 prototype）以及参数机制上存在本质区别。本文将逐一讲解每种方式的具体语法、运行行为与适用边界，帮助你在实际工程中准确选型。

一、函数声明（Function Declaration）

函数声明是 JavaScript 中最传统、最直观的定义方式。它的核心语法是以 function 关键字开头，后紧跟必需的函数名、圆括号参数列表以及花括号包围的函数体。

// 基础函数声明语法示例
function calculateTotal(price, taxRate) {
  return price + (price * taxRate);
}

// 调用函数
const total = calculateTotal(100, 0.08);
console.log(total); // 示例输出: 108

1. 核心机制：完整声明提升（Hoisting）

函数声明最重要的运行特征是整体验证提升。在 JavaScript 引擎解析执行一段代码之前，会先经历词法分析与编译创建阶段。在这个阶段，引擎会把所有的函数声明提升到当前作用域的顶部，并将其函数体完整分配到内存中。

这意味着：你可以在函数声明的代码行之前直接调用该函数，代码不会抛出未定义异常，执行完全正常。

// 在声明之前调用
sayHello("Alice"); // 示例输出: "Hello, Alice!"

function sayHello(name) {
  console.log("Hello, " + name + "!");
}

2. this 绑定与构造函数特性

通过函数声明创建的函数，其内部的 this 是在运行时动态绑定的，取决于该函数是如何被调用的。如果作为普通函数独立调用，在非严格模式下指向全局对象（如 window），严格模式（"use strict"）下为 undefined；如果作为对象的方法调用，this 指向该对象。

此外，函数声明拥有内部的 [[Construct]] 槽位和 prototype 属性，这意味着它可以作为构造函数配合 new 关键字来实例化对象。

二、函数表达式（Function Expression）

函数表达式的核心思想是：将一个函数作为“值”（第一型对象 First-class Citizen）赋给一个变量或常量。在语法层面上，它不是以 function 作为语句的起始，而是一个赋值表达式。

// 匿名函数表达式（最常见形态）
const multiply = function(a, b) {
  return a * b;
};

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

1. 提升差异：受限于变量声明规则

与函数声明不同，函数表达式不会获得函数体的整体提升。它的提升行为完全取决于左侧声明变量所使用的关键字（const、let 或 var）：

• 使用 const / let（现代规范推荐）：变量处于暂时性死区（TDZ, Temporal Dead Zone），在执行到该赋值语句前调用，会直接抛出 ReferenceError: Cannot access '...' before initialization。
• 使用 var：仅将变量名提升并初始化为 undefined，如果在赋值前调用，会抛出 TypeError: ... is not a function（因为在执行调用时该变量值仍是 undefined）。

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

函数表达式不仅可以是匿名的，还可以在 function 后面声明函数名称。需要注意的是，这个内部函数名只在函数体自身的作用域内有效，在外部不可访问。它主要解决两个问题：

1. 递归调用解耦：即使外部承载的变量被重新赋值，内部依然可以通过自身名字稳定实现自引用。
2. 清晰的调用堆栈追踪：在浏览器 DevTools 或 Node.js 报错堆栈（Stack Trace）中，能清晰看到具体的函数名而非显示为 (anonymous)。

// 具名函数表达式示例
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // 内部安全自引用
};

console.log(factorial(4)); // 示例输出: 24
// fact(4); // 抛出错误: ReferenceError: fact is not defined

三、箭头函数（Arrow Function）

箭头函数是 ECMAScript 6 (ES2015) 引入的一种更加现代、简洁的函数书写形式。它使用 => 操作符将参数列表与函数体直接连接，是函数表达式的一种特殊语法糖。

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

// 简洁写法：单一参数免括号，单一表达式隐式返回
const square = x => x * x;

// 注意：若直接返回对象字面量，需使用小括号包裹，避免与代码块花括号混淆
const createUser = (id, name) => ({ id, name });

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

箭头函数不仅简化了书写，更重要的是彻底重构了 this 的解析规则。箭头函数内部没有自己的 this 绑定，它永远固定捕获定义时所在外层词法上下文的 this 值。

这意味着在箭头函数上使用 call()、apply() 或 bind()，无法更改其 this 指向，只能传递执行参数。这一特性极大消除了过去在异步定时器、事件监听器和 Promise 链式调用中必须写 var self = this 或 .bind(this) 的繁琐代码。

2. 箭头函数的关键限制与不可用场景

为了保持纯粹与轻量，JavaScript 设计规范对箭头函数移除了多项传统特性：

• 没有 arguments 对象：内部访问 arguments 将指向外层普通函数的参数。如需在箭头函数中获取不定长度参数，必须使用 ES6 剩余参数语法（(...args) => { ... }）。
• 不能作为构造函数：箭头函数内部没有 [[Construct]] 槽位，也不具备 prototype 属性。使用 new 操作符调用会立即抛出 TypeError: ... is not a constructor。
• 不能用作生成器（Generator）：箭头函数体内部不能使用 yield 关键字。

四、常见混淆点与误区辨析

五、实际编码中的选型决策与全特性速查

面对三种主要方式，合理的选型原则是：让语言机制与具体的使用上下文相契合，而非单一偏好某一种写法。

全特性对比矩阵速查

特性维度	函数声明 (Declaration)	函数表达式 (Expression)	箭头函数 (Arrow Function)
语法结构	function name() {}	const fn = function() {}	const fn = () => {}
声明提升 (Hoisting)	整体完全提升，可前置调用	依附变量，let/const 处于 TDZ	依附变量，let/const 处于 TDZ
this 指向规则	运行时动态绑定（谁调用指向谁）	运行时动态绑定（谁调用指向谁）	词法作用域继承，不可被 call 改变
构造函数能力	支持 new 实例，有 prototype	支持 new 实例，有 prototype	不支持 new，无 prototype
参数对象	内置 arguments 类数组	内置 arguments 类数组	无 arguments，须用 ...rest
核心适用场景	模块顶层核心 API、公共工具函数	按需动态赋值、具名递归调用	高阶函数回调、异步操作、保留父级上下文

六、总结与实践建议

总结来说，三种主要方式各司其职，没有绝对的优劣之分：

1. 优先使用函数声明：当你需要在独立模块或文件顶级定义公共函数、工具方法，或者需要清晰的自解释结构和提前调用支持时，函数声明是可读性最好、最稳健的选择。
2. 优先使用箭头函数：在数组方法回调（如 map、filter、reduce）、Promise 链式处理、定时器以及需要保持当前组件或类上下文的场景下，箭头函数是最干净高效的选择。
3. 审慎使用函数表达式：当你需要根据运行时条件动态分发不同函数逻辑、或者需要具名递归且隔离命名污染时，使用 const 声明的函数表达式是最严谨的方案。

理解它们在提升行为、this 指向和构造能力上的差异，能让你在阅读开源代码和架构设计时更加得心应手，从根本上避免因为上下文漂移或调用时序带来的隐蔽缺陷。