JavaScript This 向导：揭秘 this 的真面目

2023-03-29 08:19:28

this 理解 JavaScript 中的对象上下文

在 JavaScript 的世界中，this 扮演着至关重要的角色，它指向当前正在执行代码的对象。通过理解 this 的指向规则，我们可以编写出更健壮、更易于维护的代码。

默认绑定：让对象拥有代码的控制权

当函数作为对象的属性被调用时，this 会指向该对象。换句话说，它将控制权交给对象，使对象能够访问和操作其自身的数据和方法。

const person = {
  name: 'John Doe',
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // 输出: "Hello, my name is John Doe."

隐式绑定：方法与对象的亲密关系

当函数作为对象的实例方法被调用时，this 也指向该对象。实例方法就像对象内部的小帮手，可以帮助对象完成特定的任务。

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person('Jane Doe');
person.greet(); // 输出: "Hello, my name is Jane Doe."

显式绑定：用 bind() 重新分配 this 的归属

有时，我们需要明确指定 this 的值。这时候，bind() 方法闪亮登场。它可以将函数绑定到特定的对象，确保当函数被调用时，this 会指向该对象。

const person = {
  name: 'John Doe',
};

const greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const boundGreet = greet.bind(person);
boundGreet(); // 输出: "Hello, my name is John Doe."

箭头函数：跳过 this 的继承链

箭头函数是一个有点特立独行的家伙，它没有自己的 this 值。相反，它会从外层函数继承 this 的值。

const person = {
  name: 'John Doe',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // 输出: "Hello, my name is undefined."

类方法：this 指向类的实例

类方法就像类内部的共享功能。当类方法被调用时，this 会指向类的实例。

class Person {
  constructor(name) {
    this.name = name;
  }

  static greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

Person.greet(); // 输出: "Hello, my name is undefined."