JavaScript 高级运用（10）：call、apply、bind，自由控制 this 指向

2024-01-15 05:43:27

在 JavaScript 中，函数的 this 指向当前正在执行该函数的对象。然而，有时我们需要在不同的对象上调用函数，而不仅仅是函数被定义的对象。这就是 call()、apply() 和 bind() 方法的用武之地。这三个方法允许我们指定函数的 this 指向，从而改变函数内部对 this 的引用。

1. call() 方法

call() 方法接受两个或多个参数，第一个参数是指定 this 指向的对象，随后的参数是传递给函数的实际参数。例如：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John Doe'
};

greet.call(person); // 输出：Hello, John Doe!

在上面的例子中，greet() 函数被调用，并通过 call() 方法指定 this 指向对象 person。因此，this.name 等同于 person.name，输出 "Hello, John Doe!"。

2. apply() 方法

apply() 方法与 call() 方法类似，但它接受一个数组作为第二个参数，而不是单独的参数。例如：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John Doe'
};

greet.apply(person, ['Jane Doe']); // 输出：Hello, Jane Doe!

在上面的例子中，greet() 函数被调用，并通过 apply() 方法指定 this 指向对象 person。同时，我们传递了一个数组 ['Jane Doe'] 作为第二个参数。因此，this.name 等同于 'Jane Doe'，输出 "Hello, Jane Doe!"。

3. bind() 方法

bind() 方法与 call() 和 apply() 方法不同，它不会立即调用函数，而是返回一个新的函数，该函数的 this 指向已经被绑定到指定的上下文对象。例如：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John Doe'
};

const boundGreet = greet.bind(person);

boundGreet(); // 输出：Hello, John Doe!

在上面的例子中，greet() 函数被调用，并通过 bind() 方法指定 this 指向对象 person。随后，我们得到了一个新的函数 boundGreet，该函数的 this 指向已经被绑定到 person。当我们调用 boundGreet() 时，this.name 等同于 person.name，输出 "Hello, John Doe!"。