关于js中bind,call,apply的理解
引言:我们常常会很迷惑,js中bind,call,apply是我们经常见到又搞不清是怎么用的一个工具,它们之
间又有什么区别呢?
举个栗子:
--- 生活中,我们如果想开空调但是没有遥控器,这时候我们想到的是什么?对,借一个邻居的空调遥控器! 那么,这个借就是将别人的东西拿来为自己所用。那么,call,bind,apply亦是如此。
在从这个栗子出发,去结合代码实际分析下,到底是怎么"借"呢?
假设有这个一个对象
const obj = {
name: '邻居家的空调',
fn() {
console.log('打开' + this.name);//打开邻居家的空调
},
};
obj.fn();
那么对象中,有一个邻居家的空调,有一个邻居家打开空调的方法(遥控器)
我们在定义一个对象表示自己家的情况
const myObj={
name:'自己家的空调',
}
很明显,我们自己家的空调没用对于的方法(遥控器),那么按照上述所说,我们需要借用邻居家的空调(fn方法)来实现我们的目的,问题是我们怎么借呢?
其实call,apply,bind都是可以借的
先说 call
我们可以这么使用
const myObj={
name:'自己家的空调',
}
//obj.fn表示邻居家的空调,call表示借,myObj表示借给的人
obj.fn.call(myObj)//打开自己家的空调
call后面跟的对一个参数可以理解为这个函数为谁所用,也就是我们上述说的"借主",然后他后面可以跟多个参数,表示传入该函数的参数
obj.fn.call(myObj,'第一个7号电池','第二个7号电池')
fn(a,b) {
console.log(a,b);//第一个7号电池 第二个7号电池
},
再说apply
apply跟call是一样的,不同的地方是传入参数的方式,call是一个个参数传入,而apply传入的是一个数组
//obj.fn表示邻居家的空调,apply表示借,myObj表示借给的人
obj.fn.call(myObj,['第一个7号电池','第二个7号电池'])
最后说bind
bind不同的是,它调用后得到一个函数,需要我们再次调用它,它传入的参数跟call是一样的形式。相当于说,我们向邻居借了个遥控器,邻居说:"我已经准备好了,你自己过来拿"
//obj.fn表示邻居家的空调,bind表示借,myObj表示借给的人
const bindFn=obj.fn.bind(myObj,'第一个7号电池','第二个7号电池')
console.log(bindFn);//ƒ fn(a,b) {...}
bindFn()//打开自己家的空调
综上所述,我们使用call,apply,bind这些方法,往往都是我们函数内this指向出现了问题,需要我们理清楚,哪个函数应该为谁所用的问题。如果理清楚了这些,一切都清晰明了了。
---over
