1.相同点
1.1都是用来改变函数的this对象的指向的
1.2第一个参数都是this要指向的对象
1.3都可以利用后续参数进行传参
那么他们的区别在哪里?先看一个例子
var xw = { name: '小王', gender: '男', age: 24, say: function( ) { alert(this.name+','+this.gender+',今年'+this.age) } } var xh = { name: '小红', gender: '女', age: 18 } xw.say();
没什么好说的,弹出的肯定是 小王,男,今年24
那么如何用xw的say方法来显示xh的数据呢?
对于call可以这样:
xw.say.call(xh)
对于apply可以这样:
xw.say.apply(xh)
而对于bind来说需要这样:
xw.say.bind(xh)( )
如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以
那么call和apply有什么区别呢?我们把例子稍微改写一下。
var xw = { name: '小王', gender: '男', age: 24, say: function(school,grade) { alert(this.name+','+this.gender+',今年'+this.age+',在'+school+'上'+grade); } } var xh = { name: '小红', gender: '女', age: 18 }
可以看到say方法内多了2个参数,我们通过call/apply的参数进行参数传递
对于call来说,是这样的
xw.say.call(xh,'实验小学','六年级')
对于apply来说,是这样的
xw.say.apply(xh,['实验小学','五年级'])
看到区别了吗?call后面的参数与say方法中是一一对应的,而apply中的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别
那么bind怎么传参呢?它可以像call那样进行传参
xw.say.bind(xh,'实验小学','二年级')( )
但是由于bind返回的仍然是一个函数,所以我们可以在调用的时候进行传参
xw.say.bind(xh)('实验小学','六年级')
总结:call、apply、bind都可以改变this对象的指向,call和apply的区别就是参数的不同,call和apply的第一个参数都是this要指向的新对象(新变量/新数据),call和apply的不同点在于之后的参数(call之后的参数与方法中是一一对应的,而apply之后的参数是一个数组,数组内的数据与方法中是一一对应的),而bind只是一个函数,还需加上( )进行调用,才可以实现和call相同的操作