一招教你弄懂js中的apply,call,bind!

530 阅读2分钟

它们的作用

都是用来改变函数或者方法中的this指向,怎么理解这句话呢,简单说就是你在使用一个对象里面的某个方法时,可以调用另外一个方法里面的属性值,如果还是不清晰的话,下面举例来看看!

例子

先定义两个对象:一个person,一个animal

let person={
  name:"winy",
  say(val1:number,val2:number){
    console.log("我是:" + this.name + "---" +(val1+val2));
    
  }
}
let animal={
  name:"cat",
}

下面来调用函数里面的say方法,具体看看this.name的变化: 首先执行:

person.say(2,3)  //我是:winy---5

这个打印毫无疑问,我相信大家都没问题!

接下来我们看看使用apply让他的this指向animal:

person.say.apply(animal,[5,5]) //我是:cat---10

第一个参数就是要让他指向的对象,第二个参数是一个数组,里面是方法需要的参数集。

我们再试试call:

person.say.call(animal,6,6) //我是:cat---12

第一个参数依旧是要让他指向的对象,后面的参数紧跟着就是方法需要的实参。

最后再试试bind:

const say2=person.say.bind(animal,7,7)
say2()  //我是:cat---14

参数传递和call是一样的,和前面两个不同的是,它有返回值,他将方法返回回来需要我们自己去执行,不像前面两个是自执行的。

总结

使用了apply,call,bind改变了this指向后,再次使用person里面的say方法时里面的name就从winy变成了cat,唯一区别就是它们的使用方法有点区别,apply和call区别在于参数传递的方式不一样,apply传的是数组,call是挨个挨个传递,bind有返回值,需要接收之后再执行,传参方式和call是一样的。使用的时候具体选择哪一个,就看个人觉得哪个方便些就用哪个,效果都是一样的。

最后,我的分享就到这里啦!希望能帮助到你理解这三个方法的作用!谢谢大家!