它们有什么用及区别？
在阐述它们如何使用之前，我们有必要整理清楚this的用法，简单的说this是JavaScript语言的一个关键字，它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。
那么问题又来了，this的值是什么呢？
因为this是在函数运行时，函数内部自动生成的一个对象，那么接下来我们通过函数来对this进行分析。
首先JavaScript中的函数可以分为两类：
- 常规函数：函数声明式，函数表达式，构造函数
- 箭头函数：（ES6引入使用）
接下来分别分析this在这些函数中究竟是什么？
理解常规函数中的this
1.纯粹的函数调用
function test(name) {
console.log(name)
console.log(this)
}
test('Jerry') //调用函数
以上函数调用的方式是非常常见的，然而这只是一种简写的形式，完整的写法应该如下：
function test(name) {
console.log(name)
console.log(this)
}
test.call(undefined, 'Tom')
这里面便出现了我们将要学习的call，先不讨论它的作用，我们继续讨论this的用处，call方法接受的第一个参数就是this，但是我们这里是undefined，按照规定，如果你传的context 是 null 或者 undefined，那么 window对象就是默认的context（严格模式下默认context 是 undefined）。
2.对象中函数的调用
const obj = {
name: 'Jerry',
greet: function() {
console.log(this.name)
}
}
obj.greet() //第一种调用方法
obj.greet.call(obj) //第二种调用方法
从上面的例子中，我们发现这次call方法的第一个参数为obj，此时说明函数greet内部的this指向了obj对象，这显而易见便知call方法的作用是改变this的指向，又因为上面两种调用方式结果一样可知函数的this指向可以理解为谁调用便指向谁。
3.构造函数中的this
每个构造函数在new之后都会返回一个对象，这个对象就是this，也就是context上下文。
理解箭头函数中的this
在使用箭头函数的时候，箭头函数会默认绑定外层的this值，所以在箭头函数中this的值和外层的this是一样的。因为箭头函数没有this，所以需要通过查找作用域链来确定this的值。
这就意味着如果箭头函数被非箭头函数包含， this绑定的就是最近一层非箭头函数的 this。
注意：多层对象件套里面的this是和最外层保持一致的。
因为今天的重点是讲解call，apply，bind的用法及实现，然而箭头函数是没有这些方法的，所以箭头函数的使用仅限于此。
首先说明call，apply是ES5中的语法，bind是ES6新引入的，它们三者的相似之处为：
- 都是用来改变函数的
this对象的指向 - 第一个参数都是
this要指向的对象 - 都可以利用后续参数进行传参
不同之处使用一个例子进行说明：
const personOne = {
name: "张三",
age: 12,
say: function () {
console.log(this.name + ',' + this.age);
}
}
const personTwo = {
name: "李四",
age: 24
}
personOne.say(); //张三，12
对于以上的结果，我们应该都非常清楚，那么问题来了，如果我们想要知道personTwo对象的信息如何实现呢？
分别使用call，apply以及bind方法实现，并从中得到它们三者的区别：
personOne.say.call(personTwo); //李四,24
personOne.say.apply(personTwo); //李四,24
personOne.say.bind(personTwo); //没有输出任何东西
修改以上代码对比可知：call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此我们需要执行它才会有结果。
personOne.say.call(personTwo); //李四,24
personOne.say.apply(personTwo); //李四,24
personOne.say.bind(personTwo)(); //李四,24
接着继续讨论其余参数
const personOne = {
name: "张三",
age: 12,
say: function (gender, phone) {
console.log(this.name + ',' + this.age + ',' + gender + ',' + phone);
}
}
const personTwo = {
name: "李四",
age: 24
}
personOne.say("女", "123");
这个例子的区别于上面的即为say函数需要传递参数，我们分别使用这三种方法实现传递参数：
personOne.say.call(personTwo, "女", "123"); //李四,24,女,123
personOne.say.apply(personTwo, ["女", "123"]); //李四,24,女,123
personOne.say.bind(personTwo, "女", "123")(); //李四,24,女,123
显而易见的区别call和bind除了第一个参数外，之后的参数均为一一传递，而apply除了第一个参数外，只有一个参数即为一个数组，数组中的每一项为函数需要的参数。
说明它们的用法以及区别之后，我们就要自己尝试着剖析它的原理，自己书写这三个方法啦~~~~~
call实现
在知道了它的使用即原理之后，想必直接看实现方法应该也可以理解的，那么先上代码：
Function.prototype.myCall = function (obj) {
const object = obj || window; //如果第一个参数为空则默认指向window对象
let args = [...arguments].slice(1); //存放参数的数组
object.func = this;
const result = object.func (...args);
delete object.func; //记住最后要删除掉临时添加的方法，否则obj就无缘无故多了个fn
return result;
}
代码非常简短，一步步进行说明解释：
因为call方法是每一个函数都拥有的，所以我们需要在Function.prototype上定义myCall，传递的参数obj即为call方法的第一个参数，说明this的指向，如果没有该参数，则指向默认为window对象。
args为一个存放除第一个参数以外的其余参数的数组（arguments为函数中接收到的多有参数，[...arguments]可以将arguments类数组转换为真正的数组，详细讲解可以查看ES6语法）。
解释object.func=this之前，我们先使用示例使用一下自己定义的myCall函数：
const personOne = {
name: "张三",
age: 12,
say: function (gender, phone) {
console.log(this.name + ',' + this.age + ',' + gender + ',' + phone);
}
}
const personTwo = {
name: "李四",
age: 24
}
Function.prototype.myCall = function (obj) {
const object = obj || window; //如果第一个参数为空则默认指向window对象
let args = [...arguments].slice(1); //存放参数的数组
object.func = this;
const result = object.func (...args);
delete object.func; //记住最后要删除掉临时添加的方法，否则object就无缘无故多了个func
return result;
}
personOne.say.myCall(personTwo,"女",18333669807); //李四,24,女,18333669807
根据示例，我们进行解释，myCall里面的this指的是personOne.say这个方法（因为myCall是一个方法，上面所说的，谁调用它，它的this便指向谁），object.func=this相当于给object这个对象克隆了一个personOne.say方法，让object在调用这个方法，相当于object.personOne.say，达到了call的效果。（记住最后要删除掉临时添加的方法，否则object就无缘无故多了个func）
object.func (...args)里面的参数即为传入的其余参数。
apply实现
通过上面的分析，想必大家应该已经基本明白了它是如何实现的了，那么接下来实现apply就非常简单了，因为两者的区别主要就是参数的传递方式不同，和上面一样，先直接看一下代码：
Function.prototype.myApply = function (obj) {
const object = obj || window; //如果第一个参数为空则默认指向window对象
if (arguments.length > 1) {
var args = arguments[1]; //存放参数的数组
} else {
var args = []; //存放参数的数组
}
object.func = this;
const result = object.func(...args);
delete object.func; //记住最后要删除掉临时添加的方法，否则obj就无缘无故多了个fn
return result;
}
personOne.say.myApply(personTwo, ["女", 24]);
主要区别就是获取参数不同，因为apply的带二个参数为数组，数组中包含函数需要的各项参数值，其余内容实现myCall相同，此处就不在做解释。
bind实现
话不多说，依旧是先上代码
Function.prototype.myBind = function (obj) {
const object = obj || window; //如果第一个参数为空则默认指向window对象
let self = this;
let args = [...arguments].slice(1); //存放参数的数组
return function () {
let newArgs = [...arguments]
return self.apply(object, args.concat(newArgs))
}
}
personOne.say.myBind(personTwo, "女", 24)();
前面的知识不重复说，return function是因为bind返回的是一个函数，并且这个函数不会执行，需要我们再次调用，那么当我们调用的时候，我们依旧可以对这个函数进行传递参数，即为支持柯里化形式传参，所以需要在返回的函数中声明一个空的数组接收调用bind函数返回的函数时传递的参数，之后对两次的参数使用concat()方法进行连接，调用ES5中的apply方法。
