JavaScript this指向全解析（二）

2023-12-21 18:51:30

JavaScript this指向详解（二）

规则一：默认绑定

默认绑定是最简单的绑定规则。当函数作为对象的属性被调用时，this被绑定到该对象上。例如：

const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
};

person.greet(); // 输出：Hello, my name is John Doe and I am 30 years old.

规则二：隐式绑定

隐式绑定发生在函数被作为另一个函数的参数被调用时。此时，this被绑定到调用函数的对象上。例如：

const button = document.getElementById("my-button");

button.addEventListener("click", function() {
  console.log(this); // 输出：<button id="my-button">...</button>
});

规则三：显示绑定

显示绑定允许开发者显式地指定this的绑定对象。使用.bind()方法可以实现显示绑定。例如：

const person = {
  name: "John Doe",
  age: 30,
};

const greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const boundGreet = greet.bind(person);

boundGreet(); // 输出：Hello, my name is John Doe and I am 30 years old.

规则四：new

当使用new调用函数时，this被绑定到新创建的对象上。例如：

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person("John Doe", 30);

person.greet(); // 输出：Hello, my name is John Doe and I am 30 years old.