JavaScript 箭头函数与 this 绑定

Begindev 编辑部 March 25, 2026

箭头函数与传统函数之间最显著的区别之一在于它们如何处理 this 关键字。

理解这种区别对于编写正确且可预测的 JavaScript 代码至关重要，特别是在处理对象方法、事件处理程序和异步操作时。

在本章中，我们将探讨 this 在箭头函数中是如何绑定的，将其与传统函数进行对比，并提供实际示例来说明这些概念。

1. 理解传统函数中的 `this`

在传统 JavaScript 函数中，this 的值是动态的，取决于函数是如何被调用的。这可能会令人困惑，因为 this 并不指向函数本身，而是指向“拥有”或调用该函数的对象。

1.1 隐式绑定 (Implicit Binding)

当函数作为对象的方法被调用时，this 绑定到该对象。

const person = {
  name: '爱丽丝',
  greet: function() {
    console.log(`你好，我的名字是 ${this.name}`);
  }
};
person.greet(); // 输出: 你好，我的名字是 爱丽丝

在这个例子中，greet 函数内部的 this 指向 person 对象。

1.2 显式绑定 (Explicit Binding)

你可以使用 call、apply 或 bind 方法显式设置 this 的值。

function greet() {
  console.log(`你好，我的名字是 ${this.name}`);
}
const person = {
  name: '鲍勃'
};
greet.call(person);   // 输出: 你好，我的名字是 鲍勃
greet.apply(person);  // 输出: 你好，我的名字是 鲍勃
const greetPerson = greet.bind(person);
greetPerson();        // 输出: 你好，我的名字是 鲍勃

1.3 `new` 绑定 (New Binding)

当使用 new 关键字调用函数时，this 绑定到新创建的对象。

function Person(name) {
  this.name = name;
  console.log(`正在创建新用户: ${this.name}`);
}
const person = new Person('查理'); // 输出: 正在创建新用户: 查理
console.log(person.name);             // 输出: 查理

1.4 默认绑定 (Default Binding)

如果以上规则都不适用，this 绑定到全局对象（浏览器中是 window，Node.js 中是 global），在严格模式下则是 undefined。

function greet() {
  console.log(`你好，我的名字是 ${this.name}`);
}
// 在非严格模式下，this.name 可能指向全局变量，可能导致意外行为。
// 在严格模式下，`this` 将是 undefined。
greet();

2. 箭头函数中的 `this`：词法绑定 (Lexical Binding)

与传统函数不同，箭头函数没有自己的 this 绑定。相反，它们从封闭的执行上下文中词法继承 this 值。

简单来说，箭头函数内部的 this 与包围它的代码中的 this 是同一个东西。这种行为非常有用且可预测。

2.1 箭头函数从周围环境捕获 `this`

const person = {
  name: '爱丽丝',
  greet: function() {
    setTimeout(() => {
      console.log(`你好，我的名字是 ${this.name}`);
    }, 100);
  }
};
person.greet(); // 输出: 你好，我的名字是 爱丽丝 (100毫秒后)

在这个例子中，setTimeout 内部的箭头函数捕获了 greet 函数的 this 值，该值绑定到了 person 对象。

如果我们使用传统函数在 setTimeout 内部，this 将会绑定到全局对象（window）或 undefined（严格模式下），代码将无法按预期工作。

2.2 无法通过 `call`、`apply` 或 `bind` 绑定

因为箭头函数是词法继承 this 的，你不能使用 call、apply 或 bind 来覆盖 this。这些方法对箭头函数内部的 this 值没有任何影响。

const person = {
  name: '鲍勃',
  greet: () => {
    console.log(`你好，我的名字是 ${this.name}`);
  }
};
const anotherPerson = {
  name: '查理'
};

// 输出: 你好，我的名字是 undefined (或者如果定义了全局 name，则是全局 name)
person.greet.call(anotherPerson);

在这种情况下，即使我们试图使用 call 将 this 绑定到 anotherPerson，箭头函数的 this 仍然绑定到周围的上下文（这里可能是全局对象或 undefined）。

2.3 示例对比：传统函数 vs 箭头函数

让我们对比一下在对象方法中，传统函数和箭头函数的 this 表现。

const counter = {
  count: 0,
  incrementTraditional: function() {
    // 传统函数: 这里 this 指向 counter 对象
    setTimeout(function() {
      // 在这个回调中，this 是 window 对象（或 undefined），不是 counter
      // 因此 this.count++ 实际上是在尝试操作 window.count 或报错
      // console.log('传统函数:', this.count); // 可能会输出 NaN 或报错
    }, 1000);
  },
  incrementArrow: function() {
    // 箭头函数: 这里 this 指向 counter 对象
    setTimeout(() => {
      this.count++; // 这里的 this 继承自外部，即 counter 对象
      console.log('箭头函数:', this.count);
    }, 1000);
  }
};

counter.incrementTraditional(); // 1秒后输出: NaN (或报错/全局变量)
counter.incrementArrow();       // 1秒后输出: 箭头函数: 1

在 incrementTraditional 方法中，setTimeout 内部的传统函数丢失了 this 的上下文。而在 incrementArrow 中，箭头函数正确地捕获了来自 counter 对象的 this，这就是为什么它能按预期增加 count 属性。

2.4 何时使用箭头函数，何时使用传统函数

使用箭头函数：当你想确保 this 指向周围的上下文时，例如在对象方法或闭包中使用回调函数。
使用传统函数：当你需要 this 是动态的，依赖于函数如何被调用时。例如，定义应该绑定到对象的对象方法，或者当你需要使用 call、apply 或 bind 显式设置 this 时。
避免使用箭头函数：作为对象的方法（直接定义在对象上），特别是当你希望 this 指向对象本身时。

1. 理解传统函数中的 this