JavaScript函数声明与函数表达式、箭头函数有什么区别？

在 JavaScript 中定义一个函数，常见的写法有三种：函数声明（Function Declaration）、函数表达式（Function Expression）以及 ES6 引入的箭头函数（Arrow Function）。表面上看，它们都能接收参数并返回计算结果，但在实际执行中，三者在提升机制（Hoisting）、this 指向绑定、构造函数能力以及内置对象支持上有着决定性的本质差别。理解这些差异，是避免代码出现意外 TypeError 或上下文丢失的前提。

一、语法形式与解析时机对比

我们先从最直观的语法表现入手。函数声明属于独立语句，具有明确的函数名；而函数表达式则是将一个匿名或具名函数作为一个值赋给变量；箭头函数则是采用 => 操作符的紧凑语法糖。

// 1. 函数声明
function calculateSum(a, b) {
  return a + b;
}

// 2. 函数表达式
const calculateDifference = function(a, b) {
  return a - b;
};

// 3. 箭头函数
const calculateProduct = (a, b) => a * b;

虽然这三段代码在调用时表现一致，但 JavaScript 引擎在执行上下文的编译阶段对它们的处理机制完全不同。函数声明会被整体“提升”，而表达式与箭头函数遵循普通变量的声明与赋值规则。

图1：JavaScript 三种函数声明方式的核心结构与属性对比

二、变量提升与生命周期过程

在 JavaScript 执行代码时，分为“编译阶段”和“执行阶段”。这也是函数声明与函数表达式最明显的行为分水岭。

当 JavaScript 引擎编译作用域时，遇见函数声明会将其名称与完整的函数体直接绑定在环境记录项中。因此，即使将函数声明写在文件底部，顶部也可以正常调用。而对于函数表达式，变量只是被声明，若使用 var 声明则初始化为 undefined，若使用 const 或 let 则进入暂时性死区（TDZ），在赋值语句执行之前调用均会报错。

// 能够正常执行：函数声明整体提升
sayHello(); // 输出: "Hello"
function sayHello() {
  console.log("Hello");
}

// 报错: Cannot access 'sayHi' before initialization
sayHi(); 
const sayHi = function() {
  console.log("Hi");
};

图2：JavaScript 引擎在预编译与执行阶段处理不同函数声明的生命周期步骤

三、核心机制差异：this 绑定、arguments 与构造函数

除了变量提升之外，箭头函数与普通函数（包括函数声明和函数表达式）在底层机制上有三项关键差异：

1. this 指向：动态绑定 vs 词法作用域

对于传统的函数声明和函数表达式，其内部的 this 是在运行时根据调用者所在的对象动态确定的。如果直接调用，在非严格模式下指向 window（Node.js 下指向 global），严格模式下为 undefined。

而箭头函数没有自己的 this 绑定。它内部的 this 严格继承自定义时外层词法作用域的 this。无论通过 call()、apply() 还是 bind() 调用，都无法更改箭头函数的 this。

const user = {
  name: "Alice",
  regularMethod: function() {
    console.log("普通方法 this:", this.name);
    setTimeout(function() {
      // 这里的 this 指向全局或者 undefined，拿不到 user.name
      console.log("普通定时器 this:", this.name);
    }, 100);
  },
  arrowMethod: function() {
    setTimeout(() => {
      // 词法继承自 arrowMethod 作用域，this 稳定指向 user
      console.log("箭头函数定时器 this:", this.name);
    }, 100);
  }
};

user.regularMethod(); // 输出: "Alice", 然后是 undefined
user.arrowMethod();    // 输出: "Alice"

2. arguments 对象的支持

普通函数内部存在一个类数组对象 arguments，包含了传递给函数的所有实参；而箭头函数内部并不存在 arguments 对象。如果在箭头函数中访问它，实际上拿到的是外层环境的 arguments。在现代 JavaScript 中，推荐使用剩余参数语法（Rest Parameters，即 ...args）代替 arguments。

3. 能否作为构造函数（new 操作符）

函数声明和普通函数表达式内部有 [[Construct]] 方法，并拥有 prototype 原型属性，因此可以通过 new 实例化对象。箭头函数则不具备 [[Construct]] 方法，也没有 prototype 属性，如果对箭头函数使用 new，引擎会直接抛出 TypeError: ... is not a constructor。

图3：普通函数与箭头函数在底层特性与上下文支持上的架构关系

四、开发中的选型标准与场景分析

面对不同的业务逻辑，选择哪种函数形式有清晰的依据。我们可以通过表格对各项关键维度进行横向对比：

图4：JavaScript 日常开发中函数定义的决策流程与选型依据

五、总结

总的来说，函数声明、函数表达式和箭头函数各有其明确的设计目的：

• 函数声明：整体提升，适合用于模块核心功能和全局主干逻辑的定义；
• 函数表达式：遵循标准变量赋值生命周期，适合动态生成函数或在条件块内组织逻辑；
• 箭头函数：语法极其轻便，词法绑定外层 this，没有自身 arguments 且不可作为构造函数，是处理数组迭代、异步回调和闭包环境的最佳选择。

在实际编码中，只要明确判断是否需要 this 穿透以及是否需要实例化能力，就能快速做出正确的选择。