面试的时候被问到 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需要用数组的方式