call,apply,bind 方法的作用及区别

首先我们要先明白三兄弟的作用

apply, call, bind 都是为了改变函数运行时上下文（this指向）而存在的。

其次我们在来说说三兄弟的区别

相同点：

1. 三兄弟接收到的第一个参数都是要绑定的this要指向的对象
2. 都可以利用后续参数来进行传参

不同点：

1. apply的第二个参数是一个参数输出，call 和 bind 的第二个及之后的参数作为函数实参按顺序传入
2. bind不会立即调用，其他两个会立即调用

接下来是这三兄弟的基本介绍

语法:

fun.call(thisArg, param1, param2, ...)
fun.apply(thisArg, [param1,param2,...])
fun.bind(thisArg, param1, param2, ...)

返回值：

call / apply ： fun执行的结果
bind: 返回 fun 的拷贝 ，并拥有指定的 this 值和初始参数

参数：

thisArg(可选):

1. fun的this指向thisArg对象
2. 非严格模式下：thisArg指定为null，undefined，fun中的this指向window对象.
3. 严格模式下：fun的this为undefined
4. 值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象，如 String、Number、Boolean

param1,param2(可选): 传给fun的参数。

1. 如果param不传或为 null/undefined，则表示不需要传入任何参数.
2. apply第二个参数为数组，数组内的值为传给fun的参数。

调用 call 、apply、bind的必须是个函数

call、apply和bind是挂在Function对象上的三个方法,只有函数才有这些方法。

只要是函数就可以，比如: Object.prototype.toString就是个函数，我们经常看到这样的用法：Object.prototype.toString.call(data)

最后对比下call，apply，bind传参情况

var name = '漩涡鸣人',age = 6;
var obj = {
    name : '宇智波鼬',
    objAge: this.age,
    myLove:function(fm,t){
        console.log( this.name +"年龄"+ this.age,"来自" + fm + "去往" + t );
    }
}
var mw= {
    name : '自来也',
    age: 88
}
obj.myLove.call(mw,'火之国','木叶村'); //自来也年龄88来自火之国去往木叶村
obj.myLove.apply(mw,['火之国','木叶村']); //自来也年龄88来自火之国去往木叶村
obj.myLove.bind(mw,'火之国','木叶村')(); // 自来也 年龄88 来自火之国去往木叶村
obj.myLove.bind(mw,['火之国','木叶村'])(); // 自来也 年龄88 来自火之国木叶村去往undefined

从上面的四个结果不难看出

1. call，bind，apply这三个函数的第一个参数都是this的指向对象，直到第二个参数差别就出来了。
2. call的参数是直接放进去的，直接用逗号分离；
3. apply的所有参数都必须放在一个数组里面传进去；
4. bind除了返回是函数以外，它的参数和call的放入方式一样。
   它们三者的参数不限定是string类型，允许是各种类型，包括函数、对象等等。

总结

1. call，apply，bind都是可以改变函数体内this的指向。
2. call，apply，bind使用时，传入的第一个参数都是用来传递this的指向的，也就是对上下文的指定。
3. call，apply，bind都是可以传入多个参数，不同的是，call和bind的后续参数都是按照顺序传参，而apply的传参类型是数组；bind的参数可以在函数执行的时候再次添加。

部分内容转载之好兄弟 “ 暗凯” 大家可以去他博客看看 相信会有不一样的收获

链接：暗凯