使用JS简单实现apply、call和bind方法的实例代码

1.方法介绍

apply、call和bind都是系统提供给我们的内置方法，每个函数都可以使用这三种方法，是因为apply、call和bind都实现在了function的原型上（function.prototype），而他们的作用都是给我们函数调用时显式绑定上this。下面先介绍一下它们的基本用法：

apply方法：调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

使用语法：func.apply(thisarg, [argsarray])

thisarg：在func函数调用时绑定的this值；[argsarray]：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给func函数；

使用效果：

call方法：使用一个指定的 this值和单独给出的一个或多个参数来调用一个函数。

使用语法：func.call(thisarg, arg1, arg2, ...)

thisarg：在func函数调用时绑定的this值；arg1, arg2, ...：指定的参数列表，将作为参数传递给func函数；

使用效果：

bind方法：创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

使用语法：func.bind(thisarg[, arg1[, arg2[, ...]]])

thisarg：调用func函数时作为this参数传递给目标函数的值；arg1, arg2, ...：当目标函数被调用时，被预置入func函数的参数列表中的参数；

使用效果：

总结：

apply和call主要用于在函数调用时给函数的this绑定对应的值，两者作用类似，主要区别就是除了第一个参数，apply方法接受的是一个参数数组，而call方法接受的是参数列表。

bind也是给函数指定this所绑定的值，不同于apply和call的是，它会返回一个新的函数，新函数中的this指向就是我们所指定的值，且分别传入的参数会进行合并。

2.apply、call和bind方法的实现

为了所有定义的函数能够使用我们自定义的apply、call和bind方法，所以需要将自己实现的方法挂在function的原型上，这样所有的函数就可以通过原型链找到自定义的这三个方法了。

2.1.apply的实现

测试：虽然打印出来的对象中还存在symbol属性，实际上已经通过delete删除了，这里是对象引用的问题。

2.2.call的实现

call方法的实现和apply方法的实现差不多，主要在于后面参数的处理。

测试：

2.3.bind的实现

bind方法的实现稍微复杂一点，需要考虑到参数合并的问题。

测试：

总结

到此这篇关于使用js简单实现apply、call和bind方法的文章就介绍到这了,更多相关js实现apply、call和bind方法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！