JavaScript中apply、call、bind的区别与用法

1. 语法

1.1 Function.prototype.apply()

apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。 语法: func.apply(thisArg, [argsArray])

1.2 Function.prototype.call()

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。 语法: fun.call(thisArg, arg1, arg2, ...)

1.3 Function.prototype.bind()

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。 语法: fun.bind(thisArg, 队列or数组)()

2. 用法

这三个方法的用法非常相似，将函数绑定到上下文中，即用来改变函数中this的指向。

2.1 普通写法

2.2 call 与apply方法的用法

结果相同，call()和apply()，第一个参数都是要绑定上下文，后面的参数是要传递给调用该方法的函数的。不同之处在于，在给调用函数传递参数时，apply()是数组，call()参数是逐个列出的。

2.3 bind()的用法

bind方法传递给调用函数的参数可以逐个列出，也可以写在数组中。bind方法与call、apply最大的不同就是前者返回一个绑定上下文的函数，而后两者是直接执行了函数。因此，以上代码也可以这样写：

总结bind()的用法：该方法创建一个新函数，称为绑定函数，绑定函数会以创建它时传入bind()的第一个参数作为this，传入bind()的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

3. 应用场景

3.1 求数组中的最大和最小值

3.2将类数组转化为数组

3.3 数组追加

3.4 判断变量类型

3.5 利用call和apply做继承

3.6 使用 log 代理 console.log

4. 总结

• (1).三者都可以改变函数的this对象指向。
• (2).三者第一个参数都是this要指向的对象，如果如果没有这个参数，默认指向全局window。
• (3).三者都可以传参，但是apply是数组，而call是有顺序的传入。
• (4).bind 是返回对应函数，便于稍后调用；apply 、call 则是立即执行 。

5. 参考链接

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
• jianshu.com/p/bc541afad
• https://www.cnblogs.com/xljzlw/p/3775162.html

本文作者：蒙蒙 原文链接：https://zhuanlan.zhihu.com/p/35167937