深入解析 call()、apply() 和 bind()：掌握 this 指向的艺术

2023-12-10 14:17:21

控制 JavaScript 中的 this 指向：call()、apply() 和 bind()

在 JavaScript 中，this 指向是开发人员需要掌握的关键概念。它决定了函数执行时 this 所指向的对象。默认情况下，this 指向由调用函数的上下文决定。但是，call()、apply() 和 bind() 这三个强大的方法为我们提供了灵活地控制 this 指向的能力，从而扩展了 JavaScript 函数调用的可能性。

this 指向的本质

在 JavaScript 中，this 关键字指向当前执行代码的对象。在常规函数调用中，this 指向全局对象（在严格模式下为 undefined）。然而，在某些情况下，我们需要动态地改变 this 指向，以便从特定对象的角度执行函数。

call() 方法

call() 方法接受两个或更多参数：第一个参数指定 this 指向的对象，后续参数为要传递给函数的参数。call() 方法立即执行函数，并返回函数的返回值。

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

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

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

在这个例子中，greet() 函数的 this 指向被显式地设置为 person 对象。因此，当调用 greet.call(person) 时，console.log() 语句会输出 "Hello, my name is John Doe!"。

apply() 方法

apply() 方法与 call() 方法类似，但它的第二个参数必须是一个包含要传递给函数的参数的数组。apply() 方法也会立即执行函数，并返回函数的返回值。

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

function sum() {
  return [...arguments].reduce((a, b) => a + b, 0);
}

const total = sum.apply(null, numbers); // total 为 15

在这个例子中，sum() 函数的第二个参数被指定为 numbers 数组。当调用 sum.apply(null, numbers) 时，数组中的元素被作为参数传递给 sum() 函数，并返回总和 15。

bind() 方法

bind() 方法与 call() 和 apply() 方法不同，它不立即执行函数。相反，它返回一个新函数，该函数的 this 指向已永久绑定到 bind() 方法指定的第一个参数。

const boundGreet = greet.bind(person);

boundGreet(); // 输出: Hello, my name is John Doe!

在这个例子中，greet() 函数被绑定到 person 对象，并返回一个新函数 boundGreet()。当调用 boundGreet() 时，this 指向 person 对象，输出 "Hello, my name is John Doe!"。

联系与区别

联系：

call()、apply() 和 bind() 都可以改变函数的 this 指向。
这三个方法都可以接受多个参数。
它们都是 JavaScript 内置方法。

区别：

参数传递方式： call() 方法接受单个参数列表，而 apply() 方法接受一个参数数组。
立即执行： call() 和 apply() 方法立即执行函数，而 bind() 方法返回一个新函数。
this 指向绑定： bind() 方法返回一个新函数，该函数的 this 指向永久绑定到指定的第一个参数，而 call() 和 apply() 方法仅在函数调用期间临时改变 this 指向。