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

在日常的 JavaScript 开发中，定义函数主要有三种形式：函数声明（Function Declaration）、函数表达式（Function Expression）以及 ES6 引入的箭头函数（Arrow Function）。虽然它们最终都能创建可执行的函数逻辑，但在解析阶段的变量提升行为、运行时的 this 绑定规则、arguments 对象的可用性以及是否支持作为构造函数（new）等方面存在根本差异。本文将拆解这三种定义方式的底层机制与实际表现，帮助你在编码中做出准确的选型判断。

一、基础语法与定义形态对比

在语法结构上，三种定义方式呈现出清晰的演化形态：函数声明以独立的声明语句存在；函数表达式将匿名或具名函数赋值给变量；箭头函数则提供了紧凑的词法级语法。

// 1. 函数声明：拥有独立的 function 关键字和显式函数名
function calculateTotal(price, count) {
  return price * count;
}

// 2. 函数表达式：作为右值表达式赋值给变量
const calculateDiscount = function(price, rate) {
  return price * (1 - rate);
};

// 3. 箭头函数：使用 => 符号，可省略 function 关键字
const calculateTax = (price, taxRate) => price * taxRate;

箭头函数的特殊简写规则使得它在单行表达式场景下格外精简：当参数仅有一个时可省略小括号；当函数体只有一条返回表达式时，可以同时省略花括号与 return 关键字。但如果需要直接返回一个对象字面量，必须用小括号将对象包裹，例如 const makeUser = (name) => ({ name });，否则花括号会被解析为函数体块代码。

二、执行机制差异：变量提升与临时死区

JavaScript 引擎在执行代码时分为两个阶段：编译解析阶段与代码运行阶段。三种函数在预编译解析阶段的处理方式完全不同。

1. 函数声明的完全提升

使用 function foo() {} 声明函数时，函数体会在编译期被整体提取并提升（Hoisting）到所在作用域的顶部。这意味着可以在声明语句之前直接调用它，代码执行不会产生任何错误：

// 正常执行，输出 "Hello from declaration"
greet();

function greet() {
  console.log("Hello from declaration");
}

2. 函数表达式与暂时性死区（TDZ）

函数表达式的行为取决于用来接收函数的声明关键字（var、let 或 const）。函数表达式的本质是一个变量赋值操作，提升的仅仅是变量声明本身，赋值操作保持在原位。

// 错误示例 1：使用 let 或 const 声明
try {
  runTask(); // ReferenceError: Cannot access 'runTask' before initialization
} catch (e) {
  console.error(e.name);
}
const runTask = function() {
  console.log("Task running");
};

// 错误示例 2：使用 var 声明
console.log(oldTask); // 输出: undefined
try {
  oldTask(); // TypeError: oldTask is not a function
} catch (e) {
  console.error(e.name);
}
var oldTask = function() {
  console.log("Old task running");
};

箭头函数如果赋值给 const 或 let 变量，其提升特征与常规函数表达式一致，在变量声明语句执行前处于暂时性死区（Temporal Dead Zone, TDZ），提前调用会立即触发 ReferenceError。

三、核心机制差异：this 绑定与词法作用域

this 的指向是函数声明、表达式与箭头函数之间最容易引起混淆、也是最具实用价值的差异点。

1. 常规函数（声明与表达式）的动态 this

函数声明与函数表达式中的 this 是在运行时根据调用方式（Call-site）动态决定的：

• 作为普通函数直接调用：非严格模式下指向全局对象（window 或 global），严格模式（"use strict"）下为 undefined。
• 作为对象方法调用：指向调用该方法的直接对象（例如 user.show() 中 this 指向 user）。
• 显式绑定：通过 call()、apply()、bind() 强行指定 this 的指向。

const profile = {
  name: "Alice",
  printName: function() {
    console.log(this.name);
  }
};

profile.printName(); // 正常输出: "Alice"

const detached = profile.printName;
detached(); // 输出: undefined（因为脱离对象环境后直接调用，this不再是profile）

2. 箭头函数的词法 this

箭头函数没有自己的 this。它在定义时就已经确定了 this，其值完全继承自定义它时所在的外层词法作用域。箭头函数的这一特性具有两个决定性后果：

• 即使使用 call()、apply() 或 bind() 传入第一个参数，也无法改变其 this 指向。
• 在回调函数（如定时器、DOM事件监听、Promise链式调用）中，箭头函数不会发生 this 丢失问题。

function Counter() {
  this.count = 0;

  // 常规函数作为定时器回调，this 在运行时指向全局对象或 undefined
  setInterval(function() {
    // this.count 无法正确递增，这里的 this 不是 Counter 实例
  }, 1000);

  // 箭头函数直接继承构造函数外层执行上下文的 this
  setInterval(() => {
    this.count++;
    console.log(this.count); // 正确输出累加数字
  }, 1000);
}

四、参数处理与构造能力差异

除了变量提升和 this，在原型机制与参数封装层面，这三种定义形态也呈现出截然不同的规范约束。

1. arguments 参数对象支持

在常规函数声明和表达式中，函数体内部默认存在一个类数组对象 arguments，用于访问传入的所有实参，即便这些参数未在形参列表中声明：

function collectArgs() {
  console.log(arguments.length); // 输参数量
  console.log(arguments[0]);      // 首个参数
}
collectArgs("apple", "banana"); // 输出: 2, "apple"

但在箭头函数内部，并不存在自己的 arguments 对象。如果在箭头函数中直接读取 arguments，它会继续顺着作用域链寻找外层普通函数的 arguments。在现代 JavaScript 中，推荐使用 ES6 的剩余参数语法（Rest Parameters）替代 arguments：

const gatherAll = (...args) => {
  console.log(args); // args 是真正的 Array 原生数组
};
gatherAll(10, 20, 30); // 输出: [10, 20, 30]

2. 构造能力（new 操作符）与 prototype

函数声明与常规函数表达式均具备内部插槽 [[Construct]]，并且拥有 prototype 属性，可以作为构造函数配合 new 运算符创建实例对象：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHi = function() {
  console.log("Hi, " + this.name);
};
const p = new Person("Tom"); // 正常实例化

箭头函数设计初衷是作为轻量级计算与回调逻辑，因此它没有 [[Construct]] 内部方法，也没有 prototype 属性。如果尝试对箭头函数使用 new，引擎会直接抛出类型异常：

const Animal = (type) => {
  this.type = type;
};
// 抛出错误: TypeError: Animal is not a constructor
const a = new Animal("Cat");

五、全维度特性横向对照表

为了直观掌握三种函数形态的完整属性矩阵，下表整理了核心维度的具体差异：

六、工程实践与选型指南

在现代团队开发中，选用哪种函数并非纯粹的个人习惯，而是直接影响到代码的模块化健壮度与错误排查效率。以下是经过生产检验的选型路径：

1. 模块的核心公共接口：优先使用函数声明。函数声明可以在文件底部统一组织实现细节，而文件顶部的业务主流程能直接调用，提升了代码的从上至下的可阅读性。
2. 数组高阶方法与异步链式调用：坚决使用箭头函数。在 map、filter、reduce、Promise.then 或 setTimeout 中，箭头函数的简洁语法能消除模板代码，更避免了传统闭包中 var that = this 的脏模式。
3. 对象上的成员方法：避免使用箭头函数，使用普通函数或 ES6 对象方法简写（method() {}）。因为对象字面量本身不会创建独立的块级作用域，若对象方法使用箭头函数，其内部的 this 将意外穿透到全局环境或外层模块，导致无法读取对象内部属性。
4. DOM 事件监听器回调：若需要在事件回调中通过 this 读取触发事件的当前 DOM 节点（currentTarget），必须使用普通函数；若使用了箭头函数，this 将丢失对 DOM 元素的引用。