美文网首页
javascript中apply、call和bind的使用区别

javascript中apply、call和bind的使用区别

作者: 刘圣凯 | 来源:发表于2017-12-05 17:32 被阅读0次

this的指向是不确定的,可以动态改变,这样设计可以让代码更加灵活,复用性也更高,由于this的指向是不确定的,如果在有些情况下,我们需要确定this是什么该怎么办呢,我们可以用applycallbind来改变函数的this对象的指向。

先看看 applycallbind 的相似之处:

  1. 都是用来改变函数的this对象的指向的。
  2. 第一个参数都是this要指向的对象。
  3. 都可以利用后续参数传参
如何使用applycallbind
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方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。

其实applycallbind除了传递 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返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。
以上就是我对 applycallbind 之间的总结。

相关文章

网友评论

      本文标题:javascript中apply、call和bind的使用区别

      本文链接:https://www.haomeiwen.com/subject/tbicixtx.html