阅读 237

最简单的例子了解js中call()、apply()、bind()的区别和联系

面试的时候被问到 bind、call和apply的区别,当时脑袋似懂非懂,事后通过一个简单的例子写出来分享给大家

首先说一下三者的共同点

共同点:

  1. 都是用来改变函数的this对象的指向的。
  2. 第一个参数都是this要指向的对象。
  3. 都可以利用后续参数传参。

至于不同点,用一个例子区分:

新建两个对象,平板对象pad和电脑computer,只有pad里有介绍intro方法

var pad={
   name:"ipad2020",
   color:"black",
   price:"5999",
   intro:function(){
     console.log(`名称:${this.name},颜色:${this.color},价格:${this.price}`)
   },         
 };
 
var computer={
   name:"iMac2020",
   color:"white",
   price:"16999",
 };
复制代码

现在有个场景,需要computer使用intro方法输出自己的信息,但是computer本身没有这个方法,这个时候我们可以借助call、 bind、 apply,让computer调用padintro方法

//1.使用call()
pad.intro.call(computer)

//控制台输如下
名称:iMac2020,颜色:white,价格:16999
复制代码
//2.使用apply()
pad.intro.apply(computer)

//控制台输如下
名称:iMac2020,颜色:white,价格:16999
复制代码
//3.使用bind(),此时控制台不会输出任何东西,因为bind()的返回值是一个函数,我们需要再调用一下,在后面加个括号
pad.intro.bind(computer)()

//调用后控制台输如下
名称:iMac2020,颜色:white,价格:16999
复制代码

此时,可以总结出第一个差别:

区别1:call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以


继续看,新建一个noteBook对象,与之前不同的是,noteBook里的intro方法有两个参数 company和date

var noteBook={
   name:"MacBook2020",
   color:"glod",
   price:"10000",
   intro:function(company,date){
     console.log(`名称:${this.name},颜色:${this.color},价格:${this.price},公司:${company},生产日期:${date}`)
   }
 }
复制代码

继续用computer调用noteBookintro方法,不同的是,这次需要传值

//1.使用call(),传入参数
noteBook.intro.call(computer,"Apple","2020-03-17")

//控制台输出如下:
名称:iMac2020,颜色:white,价格:16999,公司:Apple,生产日期:2020-03-17

复制代码
//2.使用bind(),传入参数
noteBook.intro.bind(computer,"Apple","2020-03-17")()

//控制台输出如下:
名称:iMac2020,颜色:white,价格:16999,公司:Apple,生产日期:2020-03-17

复制代码
//3.使用apply(),此时传参方式不同于前两个,需要用数组的方式
noteBook.intro.apply(computer,["Apple","2020-03-17"])

//控制台输出如下:
名称:iMac2020,颜色:white,价格:16999,公司:Apple,生产日期:2020-03-17

复制代码

区别2:call后面的参数与intro方法中是对应的,而apply的第二个参数是一个数组,数组中的元素是和intro方法中对应。而bind它可以像call那样传参

总结:

不同点:

  1. call和apply都是对函数的直接调用,而bind方法返回的是一个函数,后面需要加()来进行调用。
  2. call和bind可以直接跟参数,而apply需要用数组的方式