技术扫盲：call(), apply() 和 bind() 三剑客的区别

2023-11-17 14:22:33

在 JavaScript 中，函数的执行上下文（this 指向）由函数调用时的调用方式决定。通常情况下，this 指向函数被调用的对象。然而，有时我们希望改变函数的执行上下文，以便在函数内部访问另一个对象的数据或方法。这时，call(), apply() 和 bind() 方法就派上用场了。

call() 方法

call() 方法接受两个参数：第一个参数是要改变其执行上下文的对象，第二个参数及以后的参数是要传递给函数的参数。例如：

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

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

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

在本例中，greet() 函数被调用时，其执行上下文被改变为 person 对象。因此，函数内部的 this 指向 person 对象，我们可以访问 person 对象的 name 属性。

apply() 方法

apply() 方法与 call() 方法类似，但它接受的参数列表有所不同。apply() 方法的第二个参数是一个数组，其中包含要传递给函数的参数。例如：

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

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

const args = ['Jane Doe'];

greet.apply(person, args); // 输出: Hello, Jane Doe!

在本例中，greet() 函数被调用时，其执行上下文被改变为 person 对象。同时，我们使用 apply() 方法将 args 数组中的参数传递给 greet() 函数。

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!

在本例中，我们使用 bind() 方法将 greet() 函数的执行上下文绑定到 person 对象。然后，我们可以调用 boundGreet 函数，而无需显式地传递 this 值和参数。

总结

方法	参数	调用方式
call()	(this, arg1, arg2, ...)	greet.call(person, 'John Doe');
apply()	(this, [arg1, arg2, ...])	greet.apply(person, ['John Doe']);
bind()	(this, arg1, arg2, ...)	const boundGreet = greet.bind(person);

使用场景

方法	适用场景
call()	当需要显式地传递 this 值和参数时。
apply()	当需要将数组中的参数传递给函数时。
bind()	当需要创建一个新的函数，并将其执行上下文绑定到指定的 this 值时。