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指向问题
好了 今天就讲解到这里 能帮到 大家我会很开心 觉得有用 请给个小红心 谢谢了