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

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

首先说一下三者的共同点

共同点：

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

至于不同点，用一个例子区分：

新建两个对象，平板对象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调用pad的intro方法

//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调用noteBook的intro方法，不同的是，这次需要传值

//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那样传参

总结：

不同点：

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