一、call、apply、bind是什么
其是Function对象原型链上的方法，主要作用是改变函数执行时的上下文（改变this指向），将对象B的方法交给对象A来执行，并且是立即执行的。
那为什么要改变函数的this指向，举个生活中例子你就明白了，比如你（对象A）上班时候想点根烟抽（事件），但是你没有打火机（方法），这时候你又不想偷跑出去买，所以你向你同事（对象B）借给一个打火机（方法），来点根烟抽（事件）。
在程序中也是一样，对象A有一个方法a，而 B 对象因为某种原因，也要用到方法a，那么是再为对象B添加方法a呢，还是借用一下 对象A的方法a呢？当然是借用对象A的，这样既完成了需求，又减少了内存的占用。
二、call、apply、bind用法的相同点和不同点
相同点：
- 调用的对象必须是Function对象；
- 第一个参数是一个对象。调用者的this会指向这个对象。如果不传，则默认为全局对象 window。
var age = '17';
var name = '小明'
let A = {
setInfo(){
console.log('我' + this.name + '今年' + this.age + '岁')
}
}
let B={
age:37,
name:'老王'
}
A.setInfo();//我undefined今年undefined岁
A.setInfo.call();//我小明今年17岁
A.setInfo.apply();//我小明今年17岁
A.setInfo.bind()();//我小明今年17岁
A.setInfo.call(B);//我老王今年37岁
A.setInfo.apply(B);//我老王今年37岁
A.setInfo.bind(B)();//我老王今年37岁
不同点：
- 第二个参数不同，call和bind接收一个参数列表，但apply不一样，接收一个包含多个参数的数组；
- 执行返回不同，call和apply返回的是调用对象执行后的值，bind返回的是函数需要再次调用。
let A = {
setInfo(province,city){
console.log('我' + this.name + '今年' + this.age + '岁,来自'+province+'省'+city+'市')
}
}
let B={
age:37,
name:'老王'
}
A.setInfo.call(B,'四川','成都');//我老王今年37岁,来自四川省成都市
A.setInfo.apply(B,['四川','成都']);//我老王今年37岁,来自四川省成都市
A.setInfo.bind(B,'四川','成都')();//我老王今年37岁,来自四川省成都市
三、封装一个修改 this 指向的方法
function bindThis(f, oTarget,...rest) {
const param=Array.from(arguments)[2];
if(param && Array.isArray(param)){
return function() {
return f.apply(oTarget,...rest);
};
} else if(f.bind){
return f.bind(oTarget,...rest)
}else{
return function() {
return f.call(oTarget,...rest);
};
}
}
bindThis(A.setInfo,B, ['四川', '成都'])();//我老王今年37岁,来自四川省成都市
bindThis(A.setInfo,B, '四川', '成都')();//我老王今年37岁,来自四川省成都市
四、call、apply的应用
- 调用父构造函数实现继承
function Personal(name,age){
this.name=name;
this.age=age;
this.setInfo=function(){
console.log('我' + this.name + '今年' + this.age + '岁')
}
}
const A=new Personal('小明','12');
function FromTo(name,age,province,city){
Personal.call(this, name,age)
this.province=province;
this.city=city;
this.setAddress=function(){
console.log('我' + this.name + '今年' + this.age + '岁,来自'+province+'省'+city+'市')
}
}
const B=new FromTo('老王','37','四川','成都');
A.setInfo();//我小明今年12岁
B.setInfo();//我老王今年37岁
B.setAddress();//我老王今年37岁,来自四川省成都市
2.巧用apply第二参数的特性，实现合并数组后求最大值和最小值
let array1=[1,3,2,5,9,6];
let array2=[11,10,16,24,20];
Array.prototype.push.apply(array1,array2);
console.log(array1)// [1, 3, 2, 5, 9, 6, 11, 10, 16, 24, 20]
console.log(Math.max.apply(null,array1))//24
console.log(Math.min.apply(null,array1))//1
- 巧用apply创建长度为20，每个值为undefined的数组
相当ES6中的Array.apply(null, { length: 20 })Array.from({ length: 20 })
