JS 箭头函数的`this`指向详解

在 JavaScript 中，this是一个非常重要的概念，它代表函数执行时的上下文。而箭头函数作为 ES6 新增的特性之一，虽然与普通函数有些相似之处，但它的this指向却有着很大的不同之处。

箭头函数与普通函数的区别

语法

箭头函数的语法比普通函数更简洁，可以帮助我们更加快速地书写代码，同时也可以减少代码中this指向发生变化的情况。

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

`this`指向

与普通函数不同，箭头函数没有自己的this值，它的this会继承外层作用域的this。

// 普通函数中的this
const obj = {
  name: "Alice",
  sayHi: function () {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj.sayHi(); // Hi, I'm Alice.

// 箭头函数中的this
const obj = {
  name: "Alice",
  sayHi: () => {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj.sayHi(); // Hi, I'm undefined.

在箭头函数中，this被继承自外层作用域，也就是全局作用域。所以此时this.name实际上是 undefined。

需要注意的是，使用箭头函数并不代表所有情况下都适用，特别是当需要动态绑定this时，我们需要使用普通函数。

箭头函数中的`this`指向

在理解箭头函数的this指向时，主要分为两种情况讨论：全局作用域下的箭头函数和对象方法中的箭头函数。

全局作用域下的箭头函数

在全局作用域下定义一个箭头函数时，此时它的this指向的是全局对象window。

const func = () => {
  console.log(this === window); // true
};
func();

这是因为箭头函数并没有改变this的指向，它的this与最近的普通函数或全局作用域是相同的。此时，最近的普通函数或全局作用域就是全局作用域。

对象方法中的箭头函数

在对象方法中使用箭头函数时，此时它的this指向的是该方法所属的对象。

const obj = {
  name: "Alice",
  sayHi: () => {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj.sayHi(); // Hi, I'm undefined.

const obj2 = {
  name: "Bob",
  sayHi: function () {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj2.sayHi(); // Hi, I'm Bob.

在第一个例子中，因为箭头函数的this并没有指向obj，而是指向了最近的全局作用域。所以此时this.name是 undefined。而在第二个例子中，因为该函数是普通函数而非箭头函数，它的this指向对象obj2。

示例说明

下面的示例说明了箭头函数在不同情况下的this指向。

示例一：定义在全局作用域的箭头函数

const func = () => {
  console.log(this === window); // true
};
func();

该例子定义了一个箭头函数func，该函数定义在全局作用域下，因此该函数中的this指向的是全局对象window。执行该函数后，控制台会依次输出true。

示例二：在对象方法中定义箭头函数

const obj = {
  name: "Alice",
  setName: function (name) {
    const set = () => {
      this.name = name;
    };
    set();
  },
};
console.log(obj.name); // Alice
obj.setName("Bob");
console.log(obj.name); // Bob

该例子定义了一个对象obj，该对象包含一个属性name和一个方法setName。在方法setName中，定义了一个箭头函数set，该函数将obj对象的name属性的值修改为传入的name值。通过调用对象方法setName("Bob")，成功将obj的name属性修改为 Bob。