call、apply和bind
前言
JS 专门为我们提供了一些方法来改变函数内部的 this 指向。常见的方法有 call()、apply()、bind() 方法。
call() 方法
call() 方法的作用
call() 方法的作用：可以调用一个函数，与此同时，它还可以改变这个函数内部的 this 指向。
call() 方法的另一个应用：可以实现继承。之所以能实现继承，其实是利用了上面的作用。
语法：
fn1.call(想要将this指向哪里, 函数实参1, 函数实参2);
备注：第一个参数中，如果不需要改变 this 指向，则传 null。
call() 方法举例
举例 1、通过 call() 调用函数：
var obj1 = {
nickName: 'xiaofeixia',
age: 28,
};
function fn1() {
console.log(this);
console.log(this.nickName);
}
fn1.call(this); // this的指向并没有被改变，此时相当于 fn1();
上方代码的打印结果：
window
undefined
上面的代码，跟普通的函数调用 fn1() 没有区别。
举例 2、通过 call() 改变 this 指向：
var obj1 = {
nickName: 'xiaofeixia',
age: 28,
};
function fn1(a, b) {
console.log(this); //obj1
console.log(this.nickName);
console.log(a + b);
}
fn1.call(obj1, 2, 4); // 先将 this 指向 obj1，然后执行 fn1() 函数
上方代码的打印结果：
obj1
xiaofeixia
6
举例 3、通过 call() 实现继承：
大白话：父类有一些特征，子类继承这个特征
// 给 Father 增加 name 和 age 属性
function Father(myName, myAge) {
this.name = myName;
this.age = myAge;
}
function Son(myName, myAge) {
// 【下面这一行，重要代码】
// 通过这一步，将 father 里面的 this 修改为 Son 里面的 this；另外，给 Son 加上相应的参数，让 Son 自动拥有 Father 里的属性。最终实现继承
Father.call(this, myName, myAge);
//this 指向的是当前实例
//call 继承父类的所有属性 name age
}
const son1 = new Son('小飞侠', 28);
console.log(JSON.stringify(son1));
上方代码中，通过 call() 方法，让 Son 继承了 Father 里面的 name 和 age 属性。
打印结果：
{"myName":"小飞侠","myAge":28}
apply() 方法
apply() 方法的作用
apply() 方法的作用：可以调用一个函数，与此同时，它还可以改变这个函数内部的 this 指向。这一点，和 call()类似。
apply() 方法的应用： 由于 apply()需要传递数组，所以它有一些巧妙应用，稍后看接下来的应用举例就知道了。
语法：
fn1.apply(想要将this指向哪里, [函数实参1, 函数实参2]);
备注：第一个参数中，如果不需要改变 this 指向，则传 null。
到这里可以看出， call() 和 apply() 方法的作用是相同的。唯一的区别在于，apply() 里面传入的实参，必须是数组（或者维数组）。
apply() 方法举例
举例、通过 apply() 改变 this 指向：
var obj1 = {
nickName: 'xiaofeixia',
age: 28,
};
function fn1(a) {
console.log(this);
console.log(this.nickName);
console.log(a);
}
fn1.apply(obj1, ['hello']); // 先将 this 指向 obj1，然后执行 fn1() 函数
注意，上方代码中，call() 里面传实参时，需要以数组的形式。即便是传一个实参，也需要传数组。
打印结果：
obj1
xiaofeixia
hello
apply() 方法的巧妙应用：求数组的最大值
我们知道，如果想要求数组中元素的最大值的时候，数组本身是没有自带方法的。那怎么办呢？
虽然数组里没有获取最大值的方法，但是数值里面有 Math.max(数字1，数字2，数字3) 方法，可以获取多个数值中的最大值。 另外，由于 apply() 方法在传递实参时，必须要以数组的形式，所以我们可以 通过 Math.max() 和 apply() 曲线救国。
举例：求数组中多个元素的最大值：
const arr1 = [3, 7, 10, 8];
// 下面这一行代码的目的，无需改变 this 指向，所以：第一个参数填 null，或者填 Math，或者填 this 都可以。严格模式中，不让填null。
const maxValue = Math.max.apply(Math, arr1); // 求数组 arr1 中元素的最大值
console.log(maxValue);
const minValue = Math.min.apply(Math, arr1); // 求数组 arr1 中元素的最小值
console.log(minValue);
//注意：//Math.max(1,2,3,4)
//Math.max.apply(null,[1,2,3,4]) 俩行代码是等价关系
打印结果：
10
3
bind() 方法
bind() 方法的作用
bind() 方法不会调用函数，但是可以改变函数内部的 this 指向。
把call()、apply()、bind()这三个方法做一下对比，你会发现：实际开发中， bind() 方法使用得最为频繁。如果有些函数，我们不需要立即调用，但是又想改变这个函数内部的this指向，此时用 bind() 是最为合适的。
语法：
新函数 = fn1.bind(想要将this指向哪里, 函数实参1, 函数实参2);
参数：
-
第一个参数：在 fn1 函数运行时，指定 fn1 函数的this 指向。如果不需要改变 this 指向，则传 null。
-
其他参数：fn1 函数的实参。
解释：它不会调用 fn1 函数，但会返回 由指定this 和指定实参的原函数拷贝。可以看出， bind() 方法是有返回值的。
call、apply、bind的区别
call()和apply()
介绍
这两个方法都是函数对象的方法，需要通过函数对象来调用。
当函数调用call()和apply()时，函数都会立即执行。
- 都可以用来改变函数的this对象的指向。
- 第一个参数都是this要指向的对象（函数执行时，this将指向这个对象），后续参数用来传实参。
显式绑定this
JS提供的绝大多数函数以及我们自己创建的所有函数，都可以使用call 和apply方法。
它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象，因此我们称之为显式绑定。
例1：
function foo() {
console.log(this.a);
}
var obj = {
a: 2
};
// 将 this 指向 obj
foo.apply(obj); //打印结果：2
第一个参数的传递
1、thisObj不传或者为null、undefined时，函数中的this会指向window对象（非严格模式）。
2、传递一个别的函数名时，函数中的this将指向这个函数的引用。
3、传递的值为数字、布尔值、字符串时，this会指向这些基本类型的包装对象Number、Boolean、String。
4、传递一个对象时，函数中的this则指向传递的这个对象。
call()和apply()的区别
call()和apply()方法都可以将实参在对象之后依次传递，但是apply()方法需要将实参封装到一个数组中统一传递（即使只有实参只有一个，也要放到数组中）。
比如针对下面这样的代码：
var persion1 = {
name: "小王",
gender: "男",
age: 24,
say: function (school, grade) {
alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var person2 = {
name: "小红",
gender: "女",
age: 18
}
如果是通过call的参数进行传参，是这样的：
persion1.say.call(persion2, "实验小学", "六年级");
如果是通过apply的参数进行传参，是这样的：
persion1.say.apply(persion2, ["实验小学", "六年级"]);
看到区别了吗，call后面的实参与say方法中是一一对应的，而apply传实参时，要封装成一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
call()和apply()的作用
- 改变this的指向
- 实现继承。Father.call(this)
bind()
- 都能改变this的指向
- call()/apply()是立即调用函数
- bind()是将函数返回，因此后面还需要加
()才能调用。
bind()传参的方式与call()相同。
参考链接：
