前端面试题:bind,call,apply的相同点和不同点

1.这个问题 在面试中还是比较常问的，本人之前也被问过 ,虽然最后回答上来了,但总觉得差强人意,
其实面试官 就想听里面核心的部分，但是我们要向提升技术 就必须 搞懂这三个的区别,而不是仅仅知道是怎么回事
很多都知道 它们三个是 更改当前作用域中的this指向的 这应该是最明显的相同点了
隐藏的相同点有函数 第一个参数都是要传入的 this,或者用对象指代this也可以 后面的可以进行 传惨
但很多时候 相同点并不是 面试官想要 很多人都知道 到不稀奇 你能说出 很多人不知道 才可以
2.先说说 怎么用吧
2.1.先说 call方法

function Super(app,time){
        this.name='js';
        this.app=app;
        this.time=time;
    }
 function Sub(){
      Super.call(this,'app','2020-2-22');  // 通过call方法 调用 Super  更改其中的this指向 同时传入参数
  }
 var a=new Sub();   // 实例化 Sub
 console.log(a.name,a.app,a.time);  // 输出 js  和 app 2020-2-22  这俩者 并不在Sub函数中 因为更改this指向 跑到了Sub对象中

2.2 apply 方法

function Super(app,time){
        this.name='js';
        this.app=app;
        this.time=time;
    }
function Sub(){
        Super.apply(this,['app','2020-2-22']); // 第二个参数 是一个数组  不是数组就会报错 
    }
var a=new Sub();
console.log(a.name,a.app,a.time);  // 输出 js  app  2020-2-22

通过使用上 我们就可以看出来 call和aplly的区别了
call 从第二个参数开始 要一个一个的传入进去
但aplly 需要的是一个数组 传入函数中的时候 会把 数组 “打散“ 变成 一个一个传入进去
但最终的效果是一样的
2.3, 比较大不同的是 bind方法
首先他绑定的格式 都和前面的 不一样, 第一个参数 往往是要绑定的对象 指代了对象的this
其实是返回一个函数对象 就像下面的这种情况

var obj={
        name:'小王',
        say:function(age){
            console.log(this.name,age)
        }
    }
    var obj2={
        name:'小红'
    }
    obj.say(18);  //输出 小王  18   
    // 小红的方法中没有 say 但还是想用 就可以 把obj中的 say方法 绑定过来
    obj2.say=obj.say.bind(obj2);  // 将 obj中的say方法 绑定到 obj2中
    obj2.say(19)  // 效果一样 可以传惨 输出  小红  19
       

其实在讲解的三者用法的时候 就能看得出来区别了
如果 学过 react的同学 就会知道 在react经常要用到 bind方法 来帮顶 当面react元素的this指向问题
好了 今天就讲解到这里 能帮到 大家我会很开心 觉得有用 请给个小红心 谢谢了