在 JavaScript 中，this 关键字通常指向执行上下文中的对象。然而，在箭头函数中，this 的行为与传统的函数不同。箭头函数不绑定自己的 this，它们继承自父执行上下文中的 this 值。这意味着在箭头函数中，this 的值是在函数定义时确定的，而不是在函数调用时确定的。

以下是箭头函数和传统函数中 this 指向的一些关键区别：

传统函数（非箭头函数）

在传统函数中，this 的值取决于函数是如何被调用的。它可以是以下之一：

  1. 全局对象：在全局执行上下文中，this 指向全局对象（在浏览器中通常是 window 对象）。
  2. 当前对象：当函数作为对象的方法调用时，this 指向调用该方法的对象。
  3. 自定义对象：当使用 call、apply 或 bind 方法时，this 可以被显式设置为这些方法的一个参数。

箭头函数

箭头函数不绑定自己的 this，它们使用词法作用域来确定 this 的值。this 的值是在函数定义时所在的上下文中继承的，而不是在函数调用时。这意味着箭头函数中的 this 与外部上下文中的 this 是相同的。箭头函数的 this 不能通过 call、apply 或 bind 方法来改变。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name); // 输出 'Alice'，因为 this 指向 obj
  },
  sayNameArrow: () => {
    console.log(this.name); // 输出 undefined 或全局对象的名字，因为 this 继承自外部上下文
  }
};

obj.sayName(); // 正常函数，this 指向 obj
obj.sayNameArrow(); // 箭头函数，this 指向全局对象或 undefined（严格模式下）

const sayNameGlobal = obj.sayName;
sayNameGlobal(); // 输出 undefined 或抛出错误，因为 this 指向全局对象

const sayNameArrowGlobal = obj.sayNameArrow;
sayNameArrowGlobal(); // 输出 undefined 或全局对象的名字，因为 this 继承自外部上下文

在上面的例子中，sayName 是一个正常函数，当它作为 obj 的方法调用时，this 指向 obj。而 sayNameArrow 是一个箭头函数，无论它是作为 obj 的方法调用还是作为全局函数调用，this 都指向全局对象或 undefined（在严格模式下）。

箭头函数的这一特性使得它们非常适合在回调函数中使用，特别是在 Vue.js 或 React 等框架中，你希望 this 指向组件实例时。由于箭头函数的 this 值不会随调用方式改变，它们在这些情况下提供了更稳定的 this 指向。