精简讨论 JavaScript 中的 this 问题

2023-12-27 18:16:05

this 的本质

在 JavaScript 中，this 关键字是一个特殊的变量，它指向当前正在执行代码的对象。这听起来可能有点抽象，但通过一些示例，您很快就能理解它的含义。

情况一：谁调用，this 就指向那个对象

const person = {
  name: "John Doe",
  age: 30,
  getAge: function () {
    return this.age;
  },
};

console.log(person.getAge()); // 输出：30

在上面的示例中，当我们调用 person.getAge() 时，this 指向 person 对象，因为 person 对象调用了 getAge() 方法。因此，this.age 等同于 person.age，从而返回 30。

情况二：箭头函数中的 this

const person = {
  name: "John Doe",
  age: 30,
  getAge: () => {
    return this.age;
  },
};

console.log(person.getAge()); // 输出：undefined

在上面的示例中，当我们调用 person.getAge() 时，this 不再指向 person 对象，而是指向全局对象 window。这是因为箭头函数 () => {} 并没有自己的 this，而是继承了其外层函数的 this。由于 getAge() 是一个箭头函数，它的外层函数是全局作用域，因此 this 指向 window。

情况三：使用 bind() 绑定 this

const person = {
  name: "John Doe",
  age: 30,
  getAge: function () {
    return this.age;
  },
};

const getAge = person.getAge.bind(person);

console.log(getAge()); // 输出：30