JavaScript 中的 this 绑定规则详解

我将为您详细讲解“JavaScript 中的 this 绑定规则详解”。该攻略将包含以下几个部分：

1. JavaScript 中的 this 指代什么
2. this 绑定规则的类型和用法
3. 示例说明

1. JavaScript 中的 this 指代什么

在 JavaScript 中，this 关键字的值取决于函数的调用方式。this 通常指代当前执行上下文的对象。在全局作用域中，this 指代全局对象（window）。在函数内部，this 还可以指代其他对象，比如函数的调用对象。

2. this 绑定规则的类型和用法

在 JavaScript 中，this 绑定规则包含以下四种类型：

2.1 默认绑定

当函数调用时，如果没有使用任何其他的符合下面三种规则的绑定，那么 this 将会被默认绑定到 window 对象（或全局对象）上。

function foo() {
  console.log(this); // window 对象（或全局对象）
}

foo();

2.2 隐式绑定

当函数作为对象的方法调用时，this 将会被隐式绑定到该对象上。

const obj = {
  name: "张三",
  sayName() {
    console.log(this.name);
  }
};

obj.sayName(); // "张三"

2.3 显式绑定

当使用 call、apply 或 bind 方法时，this 将会被显式绑定到指定的对象上。

function foo() {
  console.log(this.name);
}

const obj = { name: "张三" };

foo.call(obj); // "张三"

2.4 new 绑定

当使用 new 关键字调用构造函数时，this 将会被绑定到新创建的对象上。

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

const obj = new Person("张三");
console.log(obj.name); // "张三"

3. 示例说明

下面分别是两个示例说明：

示例一：隐式绑定

const person = {
  name: "张三",
  sayHi() {
    console.log(`Hi, 我是 ${this.name}`);
  },
  // 对象的方法中返回函数
  getSayHi() {
    return this.sayHi;
  }
};

const person2 = {
  name: "李四"
};

person.getSayHi().call(person2); // Hi, 我是 李四

在上面的示例中，person 对象中的 getSayHi() 方法返回了该对象的 sayHi 方法。当我们使用 call 方法，将 person2 对象作为 this 传递给 getSayHi() 方法的返回值时，this 将会指向 person2 对象。

示例二：显式绑定

function sayHi() {
  console.log(`Hi, 我是 ${this.name}`);
}

const person = {
  name: "张三"
};

const person2 = {
  name: "李四"
};

const boundSayHi = sayHi.bind(person);

boundSayHi(); // Hi, 我是 张三

boundSayHi.call(person2); // Hi, 我是 张三

在上面的示例中，使用 bind 方法将 sayHi 函数绑定到 person 对象上。然后，我们通过调用 boundSayHi() 方法，this 将会指向 person 对象。但是，当我们使用 call 方法并将 person2 对象作为 this 传递给 boundSayHi() 方法时，this 仍然指向 person 对象。这是因为，bind 方法创建的新函数无法被 call 方法覆盖。