call、apply以及bind

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 则是立即调用 。
原文地址:https://www.cnblogs.com/jelly7723/p/5536055.html