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

在 JavaScript 中定义一个可执行函数主要有三种形式：函数声明（Function Declaration）、函数表达式（Function Expression）以及 ES6 引入的箭头函数（Arrow Function）。理解它们的核心差异，关键在于掌握创建与解析时机（变量提升机制）、this 绑定规则、原型与构造调用能力以及语法与入参上下文这四个维度。掌握这些差异，能帮助我们在编写对象方法、事件监听器、异步回调以及模块顶层逻辑时做出准确合理的语法选择。

一、基础形态与语法特征对比

三种定义方式在代码形态上有着直观的区分：

• 函数声明：使用独立的 function 关键字起头，必须指定函数名称，作为独立的语句存在于全局或局部作用域块中。
• 函数表达式：将一个匿名或具名函数作为一个值赋给变量、对象的属性或作为参数传递。函数在赋值表达式执行时才被解析并返回。
• 箭头函数：使用 => 语法的轻量化函数形式，语法本身是表达式。支持省略参数圆括号（单参数时）以及省略花括号直接返回结果（隐式返回）。

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

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

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

二、变量提升与解析执行时机

代码运行前，JavaScript 引擎会经历编译与预解析阶段。三种函数在解释器中的加载时机完全不同，这直接决定了函数是否可以在声明语句之前调用。

函数声明具有完全的提升特性（Hoisting）。引擎会在执行任何常规代码之前，在内存中创建并完成函数的初始化。这意味着你可以在声明该函数的代码行之前安全地调用它。

函数表达式与箭头函数遵循变量绑定的常规规则。它们本质上是变量赋值操作，其提升行为取决于所使用的声明关键字（var、let 或 const）：

• 使用 let 或 const 声明时，变量名被提升但处于暂时性死区（TDZ），在执行到声明语句之前调用会直接抛出 ReferenceError。
• 使用 var 声明时，变量名会被提升并默认初始化为 undefined，在执行赋值前调用会导致 TypeError: ... is not a function。

三、this 指向机制的本质分歧

this 是 JavaScript 中最具特异性的语法机制之一。函数声明与函数表达式属于传统函数，而箭头函数则彻底改变了 this 的绑定范式。

1. 普通函数：运行时动态绑定

函数声明和函数表达式中的 this 是动态绑定的，取决于函数是在哪里以及被谁调用的（调用点调用上下文）：

• 作为对象方法被调用：obj.fn()，此时 this 指向该调用对象 obj。
• 独立作为普通函数调用：fn()，非严格模式下指向全局对象（window/global），严格模式（'use strict'）下指向 undefined。
• 显式绑定：通过 call、apply、bind 可以明确修改函数运行时的 this 指向。

2. 箭头函数：词法作用域捕获

箭头函数没有自身独立的 this 绑定。它内部的 this 严格继承自定义该箭头函数时所在的外层执行上下文（Lexical Scoping）。

• 箭头函数在声明时就已经静态锁定了外部的 this，在运行过程中无法通过 call、apply 或 bind 改变其 this。
• 当需要向回调函数（如 setTimeout、数组迭代器）传递逻辑且希望沿用当前实例的 this 时，箭头函数提供了天然的闭包支持，免去了过去 var that = this; 或 .bind(this) 的繁琐操作。

四、构造调用、参数对象与原型能力

除了变量提升和 this，在涉及面向对象编程与低阶参数处理时，三者还存在以下底层差异：

1. 能否使用 new 作为构造函数

函数声明与常规函数表达式内部具备 [[Construct]] 内部方法，同时默认拥有 prototype 原型属性，因此可以通过 new Foo() 创建实例。

而箭头函数没有 [[Construct]] 方法，也没有 prototype 属性。如果对其执行 new 操作，引擎会直接抛出类型错误：TypeError: Foo is not a constructor。

2. arguments 对象的存在与替代方案

普通函数内部存在隐式类数组对象 arguments，可直接用于访问传入的所有实参（即使形参列表中没有明确列出）。

箭头函数没有自身的 arguments 对象。如果在箭头函数中直接读取 arguments，获取到的将是其外层包裹函数的 arguments。在箭头函数中处理不定参数，推荐统一使用 ES6 剩余参数（Rest Parameters）语法：(...args) => { }。

3. Generator 支持与 yield 关键字

函数声明和表达式可以通过 function* 语法定义生成器（Generator），内部可使用 yield 挂起执行；箭头函数无法作为 Generator 函数使用，其内部不能包含 yield 语句。

五、工程场景选型与决策步骤

在实际编码中，选择使用哪种函数并非完全依赖个人喜好，而是根据函数所承担的角色来决定。遵循明确的判断逻辑可以避免常见的绑定错误和性能问题。

六、典型误区与高频踩坑示例

在日常开发中，箭头函数因其简洁的书写方式常被滥用，从而引发意外的逻辑隐患：

误区 1：在对象字面量中用箭头函数定义方法

const counter = {
  value: 0,
  // 错误：箭头函数没有自己的 this，这里的 this 指向外层全局对象
  increment: () => {
    this.value++; // 实际上修改了 window.value 或导致 NaN
  },
  // 正确：使用 ES6 对象方法简写（本质为普通函数）
  safeIncrement() {
    this.value++;
  }
};

误区 2：在 DOM 事件监听中绑定箭头函数并试图读取 this

const button = document.getElementById('submit-btn');

// 错误：这里的 this 不会指向触发事件的 button 元素
button.addEventListener('click', () => {
  this.classList.toggle('active'); // TypeError: Cannot read properties of undefined
});

// 正确方案 A：使用普通函数表达式
button.addEventListener('click', function() {
  this.classList.toggle('active'); // this 正确指向 button 元素
});

// 正确方案 B：使用箭头函数但通过 event.currentTarget 读取元素
button.addEventListener('click', (event) => {
  event.currentTarget.classList.toggle('active');
});

七、三种函数核心特性全景对比总结

为了直观巩固三种函数机制在各维度的技术细节，以下汇总表格呈现了关键特性的对照关系：