前端黑科技之JS的call、apply、bind函数揭秘

前言

在日常编程中，我们经常会遇到这样的情况：我们需要在一个函数中调用另一个函数，但又不想让被调用的函数改变其内部属性，比如变量、this指针等。此时，我们可以使用JavaScript的call()、apply()和bind()函数来解决这个问题。

函数调用概述

在JavaScript中，函数调用主要有两种方式：

• 直接调用：直接调用函数，此时函数的执行上下文为global。
• 间接调用：通过其他方式调用函数，此时函数的执行上下文可能不是global。

call()、apply()和bind()函数的用途

call()、apply()和bind()函数都属于函数调用的范畴，它们可以帮助我们在不同的上下文环境中调用函数。

• call()和apply()函数都可以改变函数的执行上下文，即改变this指针指向的对象。
• bind()函数可以改变函数的执行上下文，并且可以预先绑定一些参数。

call()函数

call()函数的语法如下：

fun.call(thisArg, arg1, arg2, ..., argN);

• fun：要调用的函数。
• thisArg：要设置的this指针。
• arg1, arg2, ..., argN：要传递给函数的参数。

call()函数的执行过程如下：

1. 将thisArg作为函数的this指针。
2. 将arg1、arg2、...、argN作为函数的参数。
3. 执行函数。

apply()函数

apply()函数的语法如下：

fun.apply(thisArg, argsArray);

• fun：要调用的函数。
• thisArg：要设置的this指针。
• argsArray：一个包含要传递给函数的参数的数组。

apply()函数的执行过程如下：

1. 将thisArg作为函数的this指针。
2. 将argsArray中的元素作为函数的参数。
3. 执行函数。

bind()函数

bind()函数的语法如下：

fun.bind(thisArg, arg1, arg2, ..., argN);

• fun：要调用的函数。
• thisArg：要设置的this指针。
• arg1, arg2, ..., argN：要预先绑定的参数。

bind()函数的执行过程如下：

1. 创建一个新的函数，该函数的this指针设置为thisArg，并且预先绑定的参数为arg1、arg2、...、argN。
2. 返回新函数。

新函数的调用方式与普通函数相同。

三个函数的比较

函数	执行上下文	预先绑定的参数
call()	可以改变	不可以
apply()	可以改变	可以
bind()	可以改变	可以

使用场景

• call()函数：当我们需要改变函数的执行上下文，并且不想预先绑定参数时，可以使用call()函数。
• apply()函数：当我们需要改变函数的执行上下文，并且需要预先绑定参数时，可以使用apply()函数。
• bind()函数：当我们需要创建一个新的函数，该函数的this指针设置为特定的对象，并且预先绑定的参数为特定的值时，可以使用bind()函数。

总结

call()、apply()和bind()函数都是JavaScript中非常有用的函数，它们可以帮助我们在不同的上下文环境中调用函数。通过理解这些函数的原理，我们可以写出更灵活、更易维护的JavaScript代码。