call与apply都可以改变js的this指向,两者最主要的区别就是使用时传参的不同,apply的参数可以以数组的形式传进来,但是call方法的参数必须要一个一个的传进来,就像这样。
func.call(this, arg1, arg2);
var arr= [arg1, arg2];
func.apply(this,arr);
可以看出call与apply主要有两个参数,第一个是改变this的指向,如下:
function log(){
console.log(this.color);
} var obj={
color:"red"
}; log.call(obj);
这里的输出结果就是red,当然,我们还可以使用
log.apply(obj);
这两种方式都改变了this的指向,使得log方法的this变成obj,从而输出red。这是call与apply的一种用法,除了改变this指向之外,我们还可以给原本的方法传入参数。
var arr1=[1,2,3];
var arr2=[5,6,9];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);
[ 1, 2, 3, 5, 6, 9 ]
这里的用法就是先把数组的push方法的this指向了arr1,然后把arr2作为push方法的参数传了进来,所以才会输出arr1的时候的值是arr1和arr2的合并。这个例子也说明了apply方法和call之间的区别。apply传进去的是arr2整个数组,而如果使用call方法则必须把这个数组的元素一个个的拆开传进去。接着我们来继续看例子:
var arr1=[1,2,3];
var max=Math.max.apply(null,arr1);
console.log(max); 3
这次我们做的是找出数组中的最大值,需要注意的是这个例子中我们的第一个参数写的是null,那是因为这里并没有改变this的指向,而是借用了max这个方法使用在arr1的参数中。再看,这次我们想写个log函数,输出传进来的内容。
function log(v){
console.log(v)
}
log(1);
log(1,2); 1
1
这种写法是不行的,因为当我们传的参数不止一个的时候就出问题了,剩下的都无法输出,解决办法之一就是使用apply。
function log(){
console.log.apply(null,arguments)
}
log(1);
log(1,2); 1
1 2
我们还可以这样写
function log(){
var len=arguments.length;
for(var i= 0;i<len;i++) {
console.log(arguments[i]);
}
}
log(1,2,3); 1
2
3
至于bind方法,看个例子
var obj={
color:"red"
};
function log(){
console.log(this.color)
}
var func=log.bind(obj);
func(); red
所以,可以把bind理解为绑定this值。
最后引用一段coco大神的总结
- apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
- apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
- apply 、 call 、bind 三者都可以利用后续参数传参;
- bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。