如何设置this的指向 call()、 apply() 和 bind()

call()、apply()和 bind() 是 JavaScript 中用于处理函数调用和 this 上下文的重要方法。这些方法允许你控制函数执行时 this 的值，这对于处理事件监听器、回调函数和其他需要特定 this 上下文的情况非常有用。

区别

• call()：立即调用函数，并设置 this 值，接受多个参数。
• apply()：立即调用函数，并设置 this 值，接受一个参数数组。
• bind()：创建一个新函数，设置 this 值，并可以预设参数。

用途

• call() 和 apply()：通常用于需要立即调用一个函数，并且需要显式地设置 this 值的情况。
• bind()：通常用于创建新的函数版本，这些函数在被调用时具有固定的 this 值，常用于事件处理程序和回调函数中。

1. call()

call() 方法调用一个函数，并指定函数内部的 this 值。你可以传入 this 值以及任意数量的参数。

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

示例：

function greet(greeting, name) {
  console.log(greeting + ', ' + name + '!');
}

const person = { name: 'Alice' };

greet.call(person, 'Hello'); // 输出: Hello, Alice!

2. apply()

apply() 方法与 call() 类似，但它接受参数的方式略有不同。它接受一个参数数组（或类似数组的对象）作为第二个参数。

function.apply(thisArg, [argsArray]);

示例

function greet(greeting, name) {
  console.log(greeting + ', ' + name + '!');
}

const person = { name: 'Alice' };

greet.apply(person, ['Hello']); // 输出: Hello, Alice!

3. bind()

bind() 方法创建一个新的函数，当这个新函数被调用时，它的 this 值会被设置为你指定的对象。此外，你还可以预设函数的参数。

function.bind(thisArg, arg1, arg2, ...);

示例

function greet(greeting, name) {
  console.log(greeting + ', ' + name + '!');
}

const person = { name: 'Alice' };

const greetPerson = greet.bind(person, 'Hello');

greetPerson(); // 输出: Hello, Alice!

下面是一个使用这些方法的综合示例：

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

Person.prototype.greet = function(greeting, timeOfDay) {
  console.log(greeting + ', ' + this.name + '!', 'It is', timeOfDay);
};

const alice = new Person('Alice');
const bob = new Person('Bob');

// 使用 .call()
alice.greet.call(bob, 'Good morning', '7:00 AM'); // 输出: Good morning, Bob! It is 7:00 AM

// 使用 .apply()
alice.greet.apply(bob, ['Good evening', '7:00 PM']); // 输出: Good evening, Bob! It is 7:00 PM

// 使用 .bind()
const greetAlice = alice.greet.bind(alice, 'Hello', 'noon');
greetAlice(); // 输出: Hello, Alice! It is noon

call()、apply()和 bind() 是非常有用的工具，可以用来控制函数执行时 this 的值。