无拘无束，任我行：揭秘JavaScript的call、apply和bind方法

2023-10-30 18:01:20

在JavaScript中，函数就像魔术师，可以接受参数，并执行一段代码，但如果我们想改变函数的调用方式，让它以不同的对象作为上下文对象执行，或者传递不同的参数，该怎么办呢？这时，call、apply和bind方法就闪亮登场了。

bind：改变函数的上下文对象

bind方法就像一个隐形斗篷，它能改变函数的上下文对象。上下文对象就是函数执行时所处的对象，默认情况下，函数的上下文对象是window对象。当我们使用bind方法时，我们可以指定一个新的上下文对象，让函数在新的对象中执行。

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

const person = {
  name: 'John'
};

const greetJohn = greet.bind(person);
greetJohn(); // 输出：Hello, John!

在上面的示例中，我们使用bind方法将greet函数绑定到person对象，然后调用greetJohn，函数在person对象中执行，因此this指向person对象，greetJohn()输出Hello, John!。

call：直接调用函数，指定上下文对象和参数

call方法就像一个传送门，它可以让我们直接调用函数，并指定上下文对象和参数。

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

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

在上面的示例中，我们使用call方法直接调用greet函数，并指定person对象作为上下文对象，John作为参数。greet()输出Hello, John!。

apply：调用函数，指定上下文对象和参数数组

apply方法与call方法类似，但它接受一个参数数组，而不是单独的参数。

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

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

在上面的示例中，我们使用apply方法直接调用greet函数，并指定person对象作为上下文对象，['John']作为参数数组。greet()输出Hello, John!。

比较call、apply和bind

方法	上下文对象	参数	用途
bind	指定	不指定	返回一个新的函数，该函数的上下文对象被绑定到指定的对象
call	指定	指定	直接调用函数，并指定上下文对象和参数
apply	指定	参数数组	直接调用函数，并指定上下文对象和参数数组