从零开始：彻底理解call、apply、bind及其区别

2023-12-27 14:29:43

剖析call、apply和bind：实现函数调用的秘密武器

在编写代码时，我们经常需要函数调用。通过调用一个函数，我们可以执行一系列操作来获得预期的结果。然而，在JavaScript中，存在着三种神秘的方法：call、apply和bind，它们可以让我们以不同的方式调用函数。这三个方法都能够改变执行上下文的this，但是它们在语法和使用场景上却有所差异。

一、call方法：明确指定上下文对象

call方法的语法为：fun.call(thisObj, arg1, arg2, ...)。它允许我们指定一个新的this对象，然后使用该对象来调用函数。需要注意的是，call方法会立即调用函数，并且返回函数的返回值。

二、apply方法：数组参数列表传递

apply方法的语法为：fun.apply(thisObj, [args])。它与call方法相似，但有一个关键的区别：apply方法接受一个数组作为参数列表，而不是一个个单独的参数。这使得apply方法在需要传递大量参数时更加方便。

三、bind方法：创建新函数，预先绑定上下文对象

bind方法的语法为：fun.bind(thisObj)。它不会立即调用函数，而是创建一个新的函数。这个新函数与原始函数具有相同的行为，但它的this对象被预先绑定为thisObj。这使得bind方法非常适合创建回调函数或事件处理程序。

表1：call、apply和bind方法的对比

方法	语法	立即调用	参数传递	常见用途
call	fun.call(thisObj, arg1, arg2, ...)	是	单个参数列表	指定新的this对象
apply	fun.apply(thisObj, [args])	是	数组参数列表	需要传递大量参数时
bind	fun.bind(thisObj)	否	无	创建新函数，预先绑定this对象

四、巧用示例，巩固call、apply和bind的应用

为了加深对这三个方法的理解，让我们通过一些示例来巩固它们的应用：

1. 使用call方法改变执行上下文

const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const anotherPerson = {
  name: "Jane"
};

person.greet.call(anotherPerson); // 输出：Hello, my name is Jane

在这个示例中，我们使用call方法将person的greet方法的执行上下文改变为anotherPerson，从而让anotherPerson能够调用person的greet方法。

2. 使用apply方法传递数组参数列表

const numbers = [1, 2, 3, 4, 5];

const sum = function(a, b, c, d, e) {
  return a + b + c + d + e;
};

console.log(sum.apply(null, numbers)); // 输出：15

在这个示例中，我们使用apply方法将sum函数的参数列表设置为numbers数组，从而简化了函数的调用。

3. 使用bind方法创建新函数，预先绑定上下文对象

const button = document.getElementById("button");

const handleClick = function() {
  console.log(this); // 输出：button
};

button.addEventListener("click", handleClick.bind(button));