函数调用的三种方式：call、apply和bind的异同比较

JavaScript 函数调用的三种方式：call()、apply() 和 bind()

JavaScript 中函数调用的方式多种多样，其中最常见的莫过于 call(), apply() 和 bind() 了。这些方法都是为了改变函数的上下文，即 this 所指向的对象，从而实现跨对象调用同一函数。

共同点

• 改变函数上下文
• 接受参数列表，作为函数参数

区别

• 立即执行 vs 延迟执行： call() 和 apply() 立即调用函数，而 bind() 只是返回一个已绑定函数，在调用时才执行。
• 参数处理： call() 的第一个参数是 this 对象，其余参数是函数参数；apply() 的第一个参数是 this 对象，第二个参数是一个参数数组；bind() 的第一个参数是 this 对象，其余参数是函数参数，但它返回一个新函数。
• 参数数量： call() 和 apply() 可接受多个参数，而 bind() 只接受一个参数。
• 返回值： call() 和 apply() 返回函数执行结果，而 bind() 返回一个新函数。

原理

这三个方法本质上都调用了 JavaScript 内置函数 Function.prototype.call(), Function.prototype.apply() 和 Function.prototype.bind().

• call()： 将第一个参数作为 this 对象，剩余参数作为函数参数，并立即调用函数。
• apply()： 将第一个参数作为 this 对象，第二个参数作为参数数组，并立即调用函数。
• bind()： 将第一个参数作为 this 对象，剩余参数作为函数参数，并返回一个已绑定 this 对象的新函数，该函数在调用时使用这些参数。

使用场景

• call() 和 apply()： 即时调用函数，并指定 this 对象和参数。
• bind()： 创建一个已绑定 this 对象的新函数，该函数在调用时使用这些参数。

代码示例

call()：

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

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

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

apply()：

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

const result = sum.apply(null, numbers); // 6

bind()：

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

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

const greetJohn = greet.bind(person);

greetJohn('Jane Doe'); // 输出：Hello, Jane Doe!

结论

call(), apply() 和 bind() 都是修改函数上下文的强大工具。理解它们之间的差异至关重要，这样你才能在代码中有效地使用它们。

常见问题解答

1. 哪种方法更好？ 这取决于具体情况。call() 和 apply() 适合立即调用函数，而 bind() 适用于创建已绑定 this 对象的新函数。
2. 可以同时使用多个方法吗？ 可以，但通常不建议这样做。如果需要，可以先使用 bind() 绑定 this 对象，然后再使用 call() 或 apply() 指定参数。
3. 什么时候使用箭头函数？ 箭头函数没有自己的 this 对象，因此不能与 call(), apply() 和 bind() 一起使用。
4. 可以使用 this 关键字吗？ 是的，即使使用了 call(), apply() 或 bind()，也可以在函数内部使用 this 关键字来访问 this 对象。
5. 这些方法是否兼容所有浏览器？ 是的，call(), apply() 和 bind() 方法在所有现代浏览器中都得到支持。