JavaScript函数声明、表达式与箭头函数的区别及this指向

一、语法定义与创建机制

在 JavaScript 引擎中，函数不仅是一段可执行的代码块，更是一等公民（First-Class Citizen）对象。不同的定义方式决定了该函数在作用域编译解析阶段与运行时执行阶段的不同待遇。

1. 函数声明（Function Declaration）

函数声明具有独立的语法结构，必须包含 function 关键字、函数标识符（名称）以及参数列表和函数体：

function calculateSum(a, b) {
  return a + b;
}

函数声明属于声明语句，不能直接出现在表达式允许的位置（如作为赋值操作符的右侧或作为实参传递）。

2. 函数表达式（Function Expression）

函数表达式是将一个匿名或具名函数作为一个表达式的值，赋值给变量或者常量：

// 匿名函数表达式
const calculateSum = function(a, b) {
  return a + b;
};

// 具名函数表达式（主要用于递归或调试栈追踪）
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

在具名函数表达式中，函数名 fact 仅在函数体内部的作用域可用，外层作用域只能通过变量 factorial 访问。

3. 箭头函数表达式（Arrow Function）

ES6 引入的箭头函数提供了极其简洁的书写语法，主要设计初衷是为了简化回调函数的定义并绑定外层词法环境：

// 单个参数可省略圆括号，单行表达式隐式返回
const square = x => x * x;

// 多参数与多行逻辑块
const calculateSum = (a, b) => {
  const result = a + b;
  return result;
};

二、变量提升（Hoisting）与执行时机差异

三种定义方式最直观的运行期差异在于“代码执行前能否提前调用”。这种差异源于 JavaScript 编译阶段对声明语句和变量初始化的处理机制。

• 函数声明（整体提升）：在词法解析阶段，函数声明的标识符与整个函数体都会被提升到当前作用域的顶部。在执行流到达声明语句之前调用该函数是完全合法的。
• 函数表达式（变量名提升）：函数表达式遵循其绑定的变量声明类型。若使用 let 或 const，变量处于暂存死区（TDZ），在赋值前调用会抛出 ReferenceError；若使用 var，变量名被提升且初始值为 undefined，在赋值前执行调用会抛出 TypeError: calculateSum is not a function。
• 箭头函数（变量名提升）：箭头函数本质上也是表达式，绝大多数场景使用 const 声明，同样受到暂存死区约束，必须先声明并完成赋值，之后才能被安全调用。

三、核心本质：this 指向机制系统推导

理解 JavaScript 中 this 的核心在于认清：普通函数的 this 是在运行时动态绑定的（取决于调用者），而箭头函数的 this 是在定义时由外层词法作用域决定的（静态捕获）。

1. 普通函数的 4 种动态绑定规则（优先级由低到高）

1. 默认绑定（独立函数调用）：直接调用函数如 func()。在非严格模式下，this 指向全局对象（浏览器环境为 window，Node.js 为 global）；在严格模式（'use strict'）下，this 绑定为 undefined。
2. 隐式绑定（方法调用）：通过上下文对象调用函数如 obj.func()。此时 this 指向该调用对象 obj。需要注意“隐式丢失”问题：若将 obj.func 赋值给另一个变量后再执行独立调用，将退化为默认绑定。
3. 显式绑定（call / apply / bind）：通过 Function.prototype.call、apply 或 bind 强制指定执行上下文。call 与 apply 会立即执行并绑定，bind 则返回一个永久固化该 this 的新函数。
4. new 构造绑定：使用 new Func() 调用时，JavaScript 引擎会新建一个空对象，将其 [[Prototype]] 链接至构造函数的原型，并将该对象作为 this 传入函数执行。

2. 箭头函数的词法 this（Lexical this）

箭头函数没有自己的 this 绑定机制。它内部的 this 完全等同于该箭头函数外层最近的一个普通执行上下文中的 this。

• 箭头函数不能使用 call()、apply() 或 bind() 更改其 this 指向（传入的第一个参数会被直接忽略）。
• 箭头函数不能通过 new 实例化，因为其内部缺少 [[Construct]] 方法，强行调用会抛出 TypeError: ... is not a constructor。

四、常见实战场景与避坑指南

在实际业务开发中，this 产生 Bug 的场景绝大多数集中在异步回调、对象字面量方法以及 DOM 事件监听处理中。

1. 回调函数中的 this 丢失与修复

当一个对象方法作为回调函数传入 setTimeout 或 Promise 处理程序中时，由于执行机制是独立调用，原有的对象宿主上下文会完全丢失：

const timerService = {
  name: "TaskScheduler",
  start() {
    // 错误写法：普通函数作为回调，this丢失指向window或undefined
    setTimeout(function() {
      console.log(this.name); // 输出: undefined
    }, 100);

    // 正确写法：箭头函数捕获外层 start() 的词法 this
    setTimeout(() => {
      console.log(this.name); // 正确输出: "TaskScheduler"
    }, 100);
  }
};
timerService.start();

2. 对象字面量方法切忌滥用箭头函数

初学者容易误以为“所有地方都应升级为箭头函数”，但对象字面量的大括号 {} 并不构成块级执行上下文。在对象字面量中直接使用箭头函数定义方法，其外层词法环境实际上是全局作用域或外部模块作用域：

const user = {
  score: 100,
  // 错误：箭头函数的词法环境是全局作用域，this.score 为 undefined
  getScoreArrow: () => this.score,
  
  // 正确：使用对象方法简写（等价于普通函数），运行时隐式绑定 user
  getScoreNormal() {
    return this.score;
  }
};

console.log(user.getScoreArrow());  // 输出: undefined
console.log(user.getScoreNormal()); // 输出: 100

3. DOM 事件监听中的 this 需求

在传统 DOM 事件绑定中，浏览器的 addEventListener 会将回调函数的 this 强制设置为当前触发事件的 DOM 元素（即 event.currentTarget）：

• 若需要使用 this 快捷操作当前触发按钮（例如 this.classList.toggle('active')），必须使用普通函数。
• 若使用箭头函数，this 将继承外层上下文（例如当前 Vue/React 组件实例或全局 window），此时需要通过参数 event.currentTarget 来明确获取 DOM 元素。

五、参数对象（arguments）、构造调用与原型链

除了 this 之外，三者在底层对象属性和构造能力上也有明确的分界线：

1. arguments 伪数组对象

普通函数（声明和表达式）内部默认包含 arguments 对象，用于访问传入的所有实参。箭头函数没有属于自己的 arguments，在箭头函数内直接访问 arguments 会获取到外层函数的对应对象。

2. 构造能力与 prototype 原型

普通函数在创建时会自动生成 prototype 属性，指向其原型对象，且内部实现了 [[Construct]] 内部插槽，因此可以配合 new 操作符作为构造函数使用。

而箭头函数没有 prototype 属性（其值为 undefined），也不具备 [[Construct]] 方法。对其执行 new 将直接抛出运行时异常。

六、关键特性综合对比与选型原则

下表完整汇总了三种函数形式在语法、执行机制及特性支持上的全部差异：

总结而言：在编写顶层业务逻辑与公共 API 时，优先使用函数声明以获得清晰的模块结构与提升支持；在定义对象方法或需要动态上下文的 DOM 监听器时，使用普通函数（或 ES6 对象方法简写）；而在传递异步回调、高阶数组处理以及需要直接复用外层执行上下文的场景中，箭头函数是最安全、最直观的现代首选。