this的指向是不确定的,可以动态改变,这样设计可以让代码更加灵活,复用性也更高,由于this的指向是不确定的,如果在有些情况下,我们需要确定this是什么该怎么办呢,我们可以用apply
,call
,bind
来改变函数的this对象的指向。
先看看 apply
,call
,bind
的相似之处:
- 都是用来改变函数的this对象的指向的。
- 第一个参数都是this要指向的对象。
- 都可以利用后续参数传参
如何使用apply
,call
,bind
var xxxInfo = {
name: 'xxx',
age: 22,
say: function (){
console.log(this.name + '今年' + this.age + '岁')
}
}
var cccInfo = {
name: 'ccc',
age: '26'
}
xxxInfo.say()
那么如何用xxx的say方法来显示ccc的数据呢。
我们可以这样
var xxxInfo = {
name: 'xxx',
age: 22,
say: function (){
console.log(this.name + '今年' + this.age + '岁')
}
}
var cccInfo = {
name: 'ccc',
age: '26'
}
xxxInfo.say.call(cccInfo)//call
xxxInfo.say.apply(cccInfo)//apply
xxxInfo.say.bind(cccInfo)()//bind
首先我们执行了xxxInfo的say方法,然后让里面的 this 指向cccInfo,这里注意,call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
其实apply
,call
,bind
除了传递 this 指向对象之外,还可以接受别的参数,我们就上个例子来改写一下代码
var xxxInfo = {
name: 'xxx',
age: 22,
sayHi: function (sex){
console.log(this.name + ',' + sex + ',今年' + this.age + '岁')
}
}
var cccInfo = {
name: 'ccc',
age: '26'
}
xxxInfo.sayHi.call(cccInfo,'male')
xxxInfo.sayHi.apply(cccInfo,['male'])
xxxInfo.sayHi.bind(cccInfo)('male')
call
后面的参数与say方法中是一一对应的,
而 apply
的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,
而 bind
其实可以像 call
一样传递参数,不过由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。
以上就是我对 apply
,call
,bind
之间的总结。