细说面试中遇到call、apply、bind要怎么回答

一、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的数组
```
Array.apply(null, { length: 20 })
```
相当ES6中的
```
Array.from({ length: 20 })
```