JavaScript函数声明、表达式与箭头函数的区别

一、三种函数形态的语法与定义方式

JavaScript 随着语言版本的演进提供了不同的函数定义方式。理解它们的第一步，是准确识别各自的代码形态与基础语法规则。

1. 函数声明（Function Declaration）

函数声明是经典的书写方式，以 function 关键字开头，并且必须包含显式的函数名称：

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

2. 函数表达式（Function Expression）

函数表达式将一个函数对象赋值给一个变量。函数本身可以是匿名的，也可以是具名的（即具名函数表达式 NFE，常用于调试栈跟踪和内部递归）：

// 匿名函数表达式
const calculateTotal = function(price, taxRate) {
  return price * (1 + taxRate);
};

// 具名函数表达式
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

3. 箭头函数（Arrow Function）

箭头函数是 ES6（ECMAScript 2015）引入的新形态，使用 => 胖箭头语法，省去了 function 关键字。当单行表达式作为返回值时，可以省略花括号与 return 关键字：

// 多行函数体
const calculateTotal = (price, taxRate) => {
  const rate = taxRate || 0.1;
  return price * (1 + rate);
};

// 单行隐式返回
const double = x => x * 2;

二、生命周期与提升机制（Hoisting）的本质差异

JavaScript 引擎在执行代码时分为两个阶段：编译解析阶段与逐行执行阶段。这三类函数在不同阶段的初始化时机决定了它们能否“在声明前被调用”。

• 函数声明具备完全提升能力：在编译解析阶段，函数声明不仅其标识符会被提升到当前作用域顶部，而且函数体也会被完整创建并初始化。这意味着开发者可以在代码文件的任何位置安全调用后方声明的函数。
• 函数表达式受限于变量声明类型：当使用 var 时，变量名提升但值为 undefined，提前调用会触发 TypeError: ... is not a function；使用 let 或 const 时，变量存在暂时性死区（TDZ），在执行到赋值语句前访问会直接抛出 ReferenceError。
• 箭头函数等同于表达式：箭头函数本质上也是一种函数表达式，其初始化时机完全取决于承载它的变量定义，不具备提前调用能力。

图 1：函数提升机制在编译与执行时期的底层时序差异

三、this 绑定模型：动态调用者 vs 词法作用域捕获

this 关键字的指向是 JavaScript 最核心也最易引发错误的机制之一。普通函数与箭头函数在 this 绑定上遵循完全不同的底层哲学：

1. 普通函数：运行时动态绑定（Call-Site Binding）

对于函数声明与普通函数表达式，函数内部的 this 是在运行时根据调用方式（Call-Site）决定的，并非由函数定义时的位置决定：

• 作为对象方法调用：例如 obj.calculate()，this 指向该对象 obj。
• 独立函数调用：例如直接执行 calculate()，非严格模式下指向全局对象（浏览器中为 window），严格模式（'use strict'）下指向 undefined。
• 显式绑定：使用 call、apply 或 bind 可以强行将 this 重新绑定到指定上下文。

2. 箭头函数：编译期词法捕获（Lexical this）

箭头函数自身完全没有属于自己的 this 绑定。它在执行时不会创建新的 this 上下文，而是像查找普通变量一样，沿着作用域链向上捕获外层作用域的 this：

• 无论箭头函数被如何调用、在哪里调用，其 this 永远等于其诞生时所在外层环境的 this。
• 对箭头函数使用 call()、apply()、bind() 传入的目标对象将被直接忽略，无法篡改其词法指向。

图 2：this 绑定的底层来源对比及其在回调传递中的表现

四、构造器能力与原型链支撑（[[Construct]] 内部槽）

在 ECMAScript 规范中，一个函数对象能否被当作构造函数并通过 new 运算符实例化，取决于该对象是否在底层实现了 [[Construct]] 内部方法。

1. 函数声明与表达式支持完整构造器机制

函数声明和普通函数表达式（非方法简写）在被创建时，引擎不仅为其配置了 [[Call]] 方法（表示可执行），还配置了 [[Construct]] 方法，并自动创建一个公共的 .prototype 原型对象（其内部带有 constructor 引用回指向函数本身）。

function Car(model) {
  this.model = model;
}
Car.prototype.drive = function() {
  return `${this.model} is moving`;
};

const c1 = new Car('Sedan'); // 正常实例化

2. 箭头函数彻底摒弃构造器机制

箭头函数的设计目标是“轻量纯粹的函数计算”。为了追求极简运行开销和消除误用，规范明确规定：

• 箭头函数没有 [[Construct]] 内部方法，尝试使用 new 运算符调用会直接触发 TypeError: ... is not a constructor。
• 箭头函数没有 .prototype 属性（访问其 prototype 返回 undefined），因此它完全不参与原型链体系的扩展。
• 箭头函数内部不存在 new.target 元属性。

图 3：底层内部槽与原型链特性的完整架构对照

五、参数处理：arguments 伪数组与剩余参数

在处理未知数量的动态入参时，普通函数与箭头函数提供了完全不同的处理机制。

1. 普通函数中的 arguments 对象

函数声明与普通函数表达式在其函数体内部会自动注入一个名为 arguments 的局部变量。arguments 是一个伪数组（Array-like Object），包含按索引存储的传入参数和 length 属性，但不具备真正的 Array.prototype 原生方法（如 map、filter、reduce 等）。若需使用数组方法，必须先使用 Array.from(arguments) 或扩展运算符转换：

function sumAll() {
  // arguments 具有 length，但不能直接调用 map
  return Array.from(arguments).reduce((acc, curr) => acc + curr, 0);
}

2. 箭头函数中的剩余参数（Rest Parameters）

箭头函数内部没有自带的 arguments 对象。如果在箭头函数内访问 arguments，它会像查找 this 一样，穿透捕获其外层普通函数的 arguments 对象；若外层是全局环境，则抛出 ReferenceError。

在箭头函数（以及所有现代 JavaScript 函数）中，官方推荐且唯一的动态参数获取方式是使用 ES6 的剩余参数（Rest Parameter）：

// 剩余参数 ...args 本身就是一个真正的 Array 实例
const sumAll = (...args) => args.reduce((acc, curr) => acc + curr, 0);

剩余参数不仅在语义上比 arguments 更为显式与纯粹，而且能够配合解构、支持所有原生数组方法，在现代前端开发中已全面替代旧式的 arguments。

六、全维度对比与工程选型决策

为了在实际开发中迅速定位最合适的函数形式，下表汇总了三种定义形态在所有关键维度上的特性表现：

图 4：面向现代前端与 Node.js 工程的函数选型决策树

七、总结

JavaScript 赋予了开发者三种不同维度的函数定义工具：函数声明提供了最自然的语法和顶层提升能力，是编写独立模块功能的核心基石；函数表达式将函数视为“一等公民”的数据流实体，便于动态传递与按需赋值；而箭头函数通过语法瘦身与词法 this 绑定，彻底攻克了异步回调和闭包场景中上下文丢失的痛点。

在日常开发中，脱离具体场景单纯讨论“谁更先进”并不科学。准确理解三者在提升阶段、this 指向、构造器机制和参数对象上的内在区别，能够帮助我们在代码可读性、执行确定性与架构健壮性之间取得最佳平衡。