JavaScript箭头函数中this指向为何不同？

一、普通函数的 this：由运行时调用方式决定

要彻底弄清楚箭头函数的特殊之处，必须先回顾普通函数是如何确定 this 的。在 ECMAScript 规范中，普通函数在被调用时会创建一个新的执行上下文（Execution Context），并在其环境记录项中动态绑定一个 this 值。这个值并不取决于函数在何处定义，而是完全取决于函数是以何种形式被调用的。

通常可以将普通函数的运行时绑定规则划分为以下四种优先级：

1. new 绑定（构造调用）：使用 new Func() 创建实例时，函数内部的 this 绑定到刚刚新建的空对象上。
2. 显式绑定：通过 call、apply 或 bind 显式传入目标对象作为 this 上下文。
3. 隐式绑定（上下文对象调用）：通过对象属性形式调用（如 user.getName()），this 自动绑定到直接引用该方法的宿主对象。
4. 默认绑定（独立函数调用）：直接调用函数名（如 getName()），在非严格模式下指向全局对象（浏览器中的 window），在严格模式（'use strict'）下为 undefined。

图 1：普通函数 this 运行时动态绑定判定流程及历史痛点

正因为普通函数的 this 取决于最终的调用形式，当一个方法作为回调函数传递给其他宿主（例如 setTimeout(obj.showName, 1000)）执行时，引用被直接取出并作为普通函数单独调用，原本期望的 this 瞬间丢失，回退到全局对象或 undefined。

二、箭头函数 this 的本质：词法作用域透传

ECMAScript 6 引入的箭头函数（Arrow Function），在规范设计层面对 this 的处理逻辑做出了根本性的改变：

简单来说，箭头函数里的 this 不是动态绑定的，而是根据代码书写时的物理位置（静态词法结构）决定的。外层作用域里的 this 是谁，箭头函数内部的 this 就是谁。

图 2：普通函数与箭头函数在执行上下文层面的底层模型对比

从底层结构可以看出，普通函数具备自己完整的参数对象与 this 绑定槽位；而箭头函数执行上下文则是一个“轻量级”环境，规范中将其设计为纯粹服务于函数式表达的运算单元，舍弃了 arguments、super 以及自身独立的 this 绑定。

三、典型开发场景与运行结果比对

为了直观理解这种机制差异在实际业务中的具体体现，我们对比几个最常见的前端开发场景。

1. 异步定时器回调中的表现

在对象方法中使用 setTimeout 触发回调是最典型的场景。由于定时器回调是在全局宿主环境中执行的，普通函数会失去与对象的联系：

const timerHandler = {
  name: '任务调度器',
  // 普通函数作为回调
  startRegular: function () {
    setTimeout(function () {
      // 这里的 this 降级为默认绑定（window 或 undefined）
      console.log('普通函数结果:', this.name);
    }, 100);
  },
  // 箭头函数作为回调
  startArrow: function () {
    setTimeout(() => {
      // 词法透传：捕获 startArrow 执行时的 this，即 timerHandler
      console.log('箭头函数结果:', this.name);
    }, 100);
  }
};

timerHandler.startRegular(); // 示例输出: 普通函数结果: undefined
timerHandler.startArrow();   // 示例输出: 箭头函数结果: 任务调度器

图 3：异步调度中函数运行上下文对 this 解析的实际影响

2. call、apply 和 bind 能否更改箭头函数的 this？

许多初学者会尝试使用 .call() 或 .bind() 强行修改箭头函数内部的 this。然而依据 ECMAScript 规范，由于箭头函数没有内部的 [[ThisValue]] 存储槽，这些显式绑定操作传入的第一个参数会被完全忽略：

const sampleArrow = () => {
  console.log('箭头函数内部 this:', this);
};

const customObj = { label: '自定义绑定对象' };

// 显式指定参数传入
sampleArrow.call(customObj);
// 示例输出: 箭头函数内部 this: Window (或外层声明时所在的模块环境)

即便经过 call 或 bind 处理，箭头函数依然只会返回它在声明时捕获的外部 this。

四、容易用错箭头函数的四个典型陷阱

虽然箭头函数在处理回调和链式运算时极其简洁高效，但由于其静态词法透传和缺少构造机制的特点，在以下几个场景中如果盲目使用，会导致严重的逻辑错误：

1. 对象字面量的方法定义中

对象字面量（{}）并不会创建独立的作用域（只有函数与块级语句才会创建词法作用域）。如果在对象字面量中直接使用箭头函数定义方法，其捕获的并不是这个对象，而是对象所在的外层作用域（通常是全局 window 或模块）：

const profile = {
  score: 95,
  // 错误示范：对象花括号不构成词法作用域，this 穿透到了全局
  getScore: () => {
    return this.score;
  }
};

console.log(profile.getScore()); // 示例输出: undefined

2. 原型链方法定义中

在构造函数的原型链（prototype）上挂载方法时，目标通常是操作调用该方法的各个实例。如果使用箭头函数，this 无法指向各实例，而是固化在定义原型时的作用域：

function Member(name) {
  this.name = name;
}

// 错误示范：this 固化，无法访问到未来实例的 name 属性
Member.prototype.sayHi = () => {
  console.log('你好, ' + this.name);
};

const user = new Member('张三');
user.sayHi(); // 示例输出: 你好, undefined

3. DOM 动态事件监听回调中

浏览器在触发 DOM 事件时，常规的 addEventListener 规范会将 this 自动绑定为触发该事件的当前 DOM 节点元素（等同于 event.currentTarget）。一旦换用箭头函数，这种动态绑定能力立刻失效：

const btn = document.querySelector('#submit-btn');

// 箭头函数导致 this 指向 window，而不是按钮 DOM 元素
btn.addEventListener('click', () => {
  this.classList.toggle('active'); // 报错: Cannot read properties of undefined
});

// 正确做法：使用普通函数或使用 (e) => e.currentTarget
btn.addEventListener('click', function () {
  this.classList.toggle('active'); // 正常运行
});

4. 作为构造函数执行 new 操作

普通函数内部具有 [[Construct]] 内部方法和 prototype 属性，支持通过 new 运算符实例化；而箭头函数不具备该方法，如果强制调用 new，JavaScript 引擎会直接抛出类型错误（TypeError: ... is not a constructor）。

五、选型准则与总结决策

理解了 this 的产生机制之后，在日常开发中选择“普通函数”还是“箭头函数”就有了明确的技术依据，无需死记硬背。

图 4：函数选型决策树与核心技术特征对比总览

总结来说，JavaScript 箭头函数中 this 之所以与普通函数截然不同，根本原因在于语言规范为它们设立的执行上下文结构不同。普通函数保留了面向对象语言中基于“调用者动态分发”的特性；而箭头函数则回归函数式编程理念，不维护独立的上下文标识，让 this 像普通局部变量一样遵循词法作用域的自然向外查找规则。