JS this的绑定规则详解

2023-09-29 00:20:22

JavaScript 中 this 的绑定规则

在 JavaScript 中，this 是一个非常重要的概念，它指向函数执行时的当前对象。理解 this 的绑定规则对于掌握 JavaScript 至关重要。

绑定类型

默认绑定：

当一个函数作为独立函数调用时，this 指向全局对象（在浏览器中通常是 window 对象）。

function greet() {
  console.log(this); // 输出：window
}

greet();

隐式绑定：

当一个函数作为对象方法调用时，this 指向该对象。

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

person.greet();

显式绑定：

通过使用 call(), apply(), 或 bind() 方法，可以明确指定 this 指向的对象。

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

const anotherPerson = {
  name: 'Jane Doe',
};

person.greet.call(anotherPerson); // 输出：Hello, my name is Jane Doe

new 绑定：

当使用 new 创建一个对象时，this 指向新创建的对象。

function Person(name) {
  this.name = name;
}

const person = new Person('John Doe');

console.log(person.name); // 输出：John Doe

bind() 方法：

bind() 方法将一个函数绑定到一个特定的对象上，即使该函数不是该对象的方法。

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