目录
前言
apply、call、bind，在js中都是与this指向打交道的，它们又该如何使用呢？本文先介绍apply的用法，然后根据apply的用法引出call、bind的相同点与区别，这样就比较容易记忆。
apply
首先我先介绍其中一个，等你掌握了apply就能很快掌握另外两个了，apply，作用有两个，跟它的入参有关。
改变this指向。
将数组入参变为一般入参。
改变this指向
示例
这是网上一个常见的例子：
var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName: "Bill", lastName: "Gates", } person.fullName.apply(person1); // 将返回 "Bill Gates"
如何理解？可以这么理解，person有个方法fullName调用this.firstName和this.lastName这两个变量，this指向person这个对象，但它是没有这两个变量的。
apply可以改变调用apply方法的函数(这里指的就是person.fullName这个函数)的this指向，现在person.fullName.apply(person1)就让this指向person1了，fullName方法就可以访问到这两个值，就成功输出。
这样不好记怎么办？
可以这么记，当apply调用时，调用apply的函数是谁？(person.fullName)，把这个函数分享给person1，让person1去调用。
如果是这样你就能理解了吧，这个就跟上文的代码一个意思，以后你碰到apply修改代码指向就这么理解代码就行。(可以这么理解，但是本质不一样)
var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName: "Bill", lastName: "Gates", } person1.fullName = person.fullName person1.fullName(); // 将返回 "Bill Gates"
改变入参arguments
既然可以改变this指向，所以我们可以用它来把arguments改为数组
arguments作为函数自带的某个属性，可以用来访问函数的入参，它长得是数组的样子却没有数组的方法，例如concat()什么的都没有
因此我们可以用Array原型上的slice方法将arguments变成一个真正的数组。
(function fun(){ // console.log(arguments.concat([3]))//报错 const arr = Array.prototype.slice.apply(arguments); console.log(arr.concat([3]))//[1,2,3] })(1,2)
修改过程也很好理解，arguments没有slice方法，我们可以通过apply，等于把Array的slice给arguments用了
等于调用了(可以这么理解，但是本质不一样)：
(function fun(){ // console.log(arguments.concat([3]))//报错 arguments.slice = Array.prototype.slice const arr = arguments.slice() console.log(arr.concat([3]))//[1,2,3] })(1,2)
将数组入参变为一般入参
就是apply的第二个参数接受的是数组。
接收数组有什么用？
比如当一个函数入参是非数组，而你目前拥有的是数组，你不想处理数组再进行入参的输入，你就可以使用apply。
文字看的麻烦就直接看例子：
Math.max(1,2,3)//3 Math.max([1,2,3])//报错 Math.max.apply(null,[1,2,3])//3
需要注意的是这里的第一个值为null时，
在 “JavaScript 严格模式”下则它将成为被调用函数的所有者（对象）也就是没改变指向，在“非严格”模式下，它成为全局对象。
因为我们只是测试第二个入参作用，因此，第一个入参null就用来占位，就算改变了指向我们也没有用到它。
call
上面提到apply的第二个参数接受的是数组。
而call不是，它的参数接受的是分别地提供的参数，这就是它们最大的区别，其他用法一致。
以下的例子结果是一致的，可以加深一下你对apply和call区别的理解。
var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"John", lastName: "Doe" } // apply const applyRes = person.fullName.apply(person1, ["Oslo", "Norway"]); console.log(applyRes) // John Doe,Oslo,Norway // call const callRes = person.fullName.call(person1, "Oslo", "Norway"); console.log(callRes) // John Doe,Oslo,Norway
bind
bind的区别要同时与apply、call比较。
bind是创造了一个新的函数，apply、call是直接执行。
var person = { fullName: function (city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName: "John", lastName: "Doe" } // apply const bindFun = person.fullName.bind(person1);
我们分析一下bindFun这个新函数，其实就是绑定了person1的person.fullName，入参有就是person.fullName的入参，
我们可以直接使用
console.log(bindFun("Oslo", "Norway")) // John Doe,Oslo,Norway
bind同时可以添加后面的入参，入参形式与call一样。
但是不同的是bind可以在创造时添加固定入参，后续调用新函数时的入参会加在固定入参后面。
var person = { fullName: function (city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName: "John", lastName: "Doe" } // apply const bindFun = person.fullName.bind(person1,"Oslo");// 固定第一个入参"Oslo" console.log(bindFun()) // John Doe,Oslo,undefined //这里传递的是第二个入参"Norway"，加在固定入参"Oslo"的后面 console.log(bindFun("Norway")) // John Doe,Oslo,Norway
var person = { fullName: function (city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName: "John", lastName: "Doe" } // apply const bindFun = person.fullName.bind(person1,"Oslo", "Norway"); //固定了两个入参 console.log(bindFun()) // John Doe,Oslo,Norway // 两个入参都已经被固定了，这里传递的入参已经无效了 console.log(bindFun("newOslo", "newNorway")) // John Doe,Oslo,Norway
尾言
相信看到这，你就掌握了apply、call、bind的区别与使用方法，如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~
