深入解析 JS 函数的 call、apply 及 bind 方法

2023-09-05 03:43:06

掌握 JavaScript 中的 call、apply 和 bind：改变函数执行的 this 指向

在 JavaScript 中，函数的执行上下文决定了函数内部 this 的值。默认情况下，this 指向调用它的对象。然而，有时我们需要在不同的上下文中使用同一个函数，这就需要改变函数执行时的内部 this 指向。

JavaScript 提供了三种方法来改变函数执行时的内部 this 指向：call、apply 和 bind。这三个方法都接受两个参数：第一个参数指定函数执行时内部 this 的值，第二个参数指定函数的参数列表。

1. call 方法

call 方法的语法如下：

Function.call(thisArg, arg1, arg2, ...)

其中，

示例：

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

greet.call("John"); // Hello, John!

在上面的示例中，greet 函数的内部 this 被设置为 "John"。因此，当函数被调用时，控制台会输出 "Hello, John!"。

2. apply 方法

apply 方法的语法如下：

Function.apply(thisArg, argsArray)

其中，

示例：

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

greet.apply("John", ["Mary"]); // Hello, Mary!

在上面的示例中，greet 函数的内部 this 被设置为 "John"。此外，函数 greet 被传递了一个参数数组 ["Mary"]。因此，当函数被调用时，控制台会输出 "Hello, Mary!"。

3. bind 方法

bind 方法的语法如下：

Function.bind(thisArg, arg1, arg2, ...)

其中，

bind 方法与 call 和 apply 方法的区别在于，bind 方法返回一个新的函数，该函数的内部 this 值已被绑定到 thisArg。这意味着，当我们调用这个新函数时，它的内部 this 值将始终等于 thisArg。

示例：

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

const greetJohn = greet.bind("John");

greetJohn(); // Hello, John!

在上面的示例中，当我们调用 greetJohn 函数时，它的内部 this 值将始终等于 "John"。因此，控制台会输出 "Hello, John!"。

call、apply 和 bind 方法都可以改变函数执行时的内部 this 指向，但是它们之间存在一些区别：

参数传递方式： call 方法和 apply 方法都支持向目标函数传递任意个参数，而 bind 方法只支持在绑定函数时传递参数。
返回结果： call 方法和 apply 方法都会直接执行目标函数并返回执行结果，而 bind 方法返回一个新的函数，该函数的内部 this 值已被绑定到指定的值。

call、apply 和 bind 方法都有各自的应用场景：

call 方法： 当我们需要在不同的上下文中使用同一个函数时，可以使用 call 方法来改变函数执行时的内部 this 指向。
apply 方法： 当我们需要向目标函数传递一个参数数组时，可以使用 apply 方法来改变函数执行时的内部 this 指向。
bind 方法： 当我们需要创建一个新的函数，该函数的内部 this 值已被绑定到指定的值时，可以使用 bind 方法来改变函数执行时的内部 this 指向。