前端基础必备知识：深入剖析 JavaScript 的 call、apply、bind 函数

2024-02-16 18:13:10

前言

在 JavaScript 中，函数是一个一等公民，这意味着函数可以作为另一个函数的参数被传递。这使得 JavaScript 非常灵活，但也带来了一个问题：函数的执行上下文。

函数的执行上下文是指函数执行时所处的环境，它包括函数的参数、局部变量和全局变量。当一个函数被调用时，它会在当前的执行上下文中执行。但是，如果我们想改变函数的执行上下文，该怎么办呢？

这正是 call、apply 和 bind 函数的作用所在。这三个函数可以改变函数的执行上下文，从而实现一些非常强大的功能，例如函数柯里化、类数组转换成真正的数组等等。

函数的调用、应用和绑定

在 JavaScript 中，函数的调用、应用和绑定是三个不同的概念。

call 函数的语法如下：

function.call(thisArg, ...args)

call 函数会立即调用函数，并将函数的执行上下文设置为 thisArg。

apply 函数的语法如下：

function.apply(thisArg, argsArray)

apply 函数也会立即调用函数，并将函数的执行上下文设置为 thisArg。与 call 函数不同的是，apply 函数的参数必须是一个数组。

bind 函数的语法如下：

function.bind(thisArg, ...args)

bind 函数不会立即调用函数，而是返回一个新的函数。这个新函数的执行上下文已经固定为 thisArg，并且参数也已经固定为 ...args。稍后可以调用这个新函数，而无需再次指定执行上下文和参数。

这三个函数的原理都是通过改变函数的执行上下文来实现的。

call 函数和 apply 函数都会立即调用函数，并将函数的执行上下文设置为 thisArg。
bind 函数不会立即调用函数，而是返回一个新的函数。这个新函数的执行上下文已经固定为 thisArg，并且参数也已经固定为 ...args。稍后可以调用这个新函数，而无需再次指定执行上下文和参数。

这三个函数的区别在于：

这三个函数在实际开发中有很多应用场景，例如：

函数柯里化： 函数柯里化是指将一个函数的部分参数固定，以便稍后调用。这三个函数都可以实现函数柯里化，但最常用的是 bind 函数。
类数组转换成真正的数组： 有时候我们需要将类数组转换成真正的数组，以便可以使用数组的方法。这三个函数都可以实现类数组转换成真正的数组，但最常用的是 apply 函数。
改变函数的执行上下文： 有时候我们需要改变函数的执行上下文，以便在另一个对象中调用该函数。这三个函数都可以改变函数的执行上下文，但最常用的是 call 函数。