使用 call()、apply() 和 bind() 函数来改变函数的 this 指向

在 JavaScript 中，可以使用 call()、apply() 和 bind() 函数来改变函数的 this 指向。

1、使用 call() 函数

call() 函数可以将一个对象作为第一个参数传递给一个函数，并将这个对象设置为函数的 this 值，然后执行函数。其语法为：

function.call(thisArg, arg1, arg2, ...)

• thisArg 是要设置为函数 this 值的对象。
• arg1, arg2, ... 是传递给函数的参数列表。

例如，以下代码展示了如何使用 call() 函数改变函数的 this 值：

const person1 = { name: 'John' };
const person2 = { name: 'Jane' };

function greeting() {
  console.log(`Hello, I'm ${this.name}`);
}

greeting.call(person1); // 输出：Hello, I'm John
greeting.call(person2); // 输出：Hello, I'm Jane

2、使用 apply() 函数

apply() 函数与 call() 函数的作用相同，但参数列表是以数组的形式传递给函数的，其语法为：

function.apply(thisArg, [argsArray])

• thisArg 是要设置为函数 this 值的对象。
• argsArray 是传递给函数的参数列表，以数组的形式表示。

例如，以下代码展示了如何使用 apply() 函数改变函数的 this 值：

const person1 = { name: 'John' };
const person2 = { name: 'Jane' };

function greeting(age) {
  console.log(`Hello, I'm ${this.name} and I'm ${age} years old`);
}

greeting.apply(person1, [30]); // 输出： Hello, I'm John and I'm 30 years old
greeting.apply(person2, [25]); // 输出： Hello, I'm Jane and I'm 25 years old

3、使用 bind() 函数

bind() 函数会创建一个新的函数实例，并将其 this 值绑定到指定的对象上。它不会像 call() 和 apply() 一样立即执行函数，而是返回一个绑定了指定 this 值的新函数。其语法为：

function.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg 是要设置为函数 this 值的对象。
• arg1, arg2, ... 是传递给函数的参数列表。

例如，以下代码展示了如何使用 bind() 函数改变函数的 this 值：

const person1 = { name: 'John' };
const person2 = { name: 'Jane' };

function greeting(age) {
  console.log(`Hello, I'm ${this.name} and I'm ${age} years old`);
}

const greetingPerson1 = greeting.bind(person1);
greetingPerson1(30); // 输出： Hello, I'm John and I'm 30 years old

const greetingPerson2 = greeting.bind(person2);
greetingPerson2(25); // 输出： Hello, I'm Jane and I'm 25 years old

以上三种方式都可以改变函数的 this 值，但它们有着不同的用途和实现细节。