call apply bind入门看这个可能就够了

js 中 的 call，apply，bind可称得上处理this的三剑客，他们的存在是 为了干什么呢？ 当然是为了改变this，改变世界，编写代码的时候更加的得心应手。 

相同点 ：

1. 大家的存在都是为了改变this指向，共同来服侍this。
2. 第一个参数都是this要指向的对象。
3. 都可以继续传递参数。

不同点：

1. call ,apply,bind 传参列表各不相同。
2. call 第一个出入this要指向的地方，第二个参数需要传入的是传递给当前对象的参数 obj.call(this,x,x,x)
3. apply第一个参数都一样，但第二个参数传入的是一个参数数组，也就是将多个参数组合成为一个数组传入  obj.apply(this,[xx,xx,xx])
   
4. bind 相比较他们两个还是有很大差别的，call 和apply传入参数的时候会自动执行的，但是bind是会创建一个新的函数，当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。

废话不多说，举个例子：

Call：

第一个参数是需要指向的对象，第二个参数为后续传入的参数，跟一般函数传参一样

var a ="globalA";

var b = "globalB";

var str = "globalStr";

var Object = {

a:"A",

b:"B"

};

function change(s){

alert("a= "+this.a + ", b= "+this.b+" "+this.s);

}

change.call(Object,str);  //a= A, b= B undefined

这样做的话change 指向的this现在发生改变，this改变为指向Object，所以Object里面定义了

a：A 和 b：B ，所以输出的话就是a=A,b=B ,至于undefined ，this去他的对象里面找不到这个属性的话，自然就会输出undefined。

如果传入的第一个参数为null，或者undefined，是会指向window的，

change.call(null,str);  //a= globalA, b= globalB ，globalStr

这个很容易看的懂，就不再累赘了。

apply：

第一个参数是需要指向的对象，第二个参数为后续传入的参数数组，需要把传进去的参数放到数组里面才可以使用

      function add(c,d){

  return this.a + this.b + c + d;

}

var s = {a:1, b:2};

console.log(add.call(s,[3,4]))

输出= 10，  无非就是1+2+3+4=10，

add函数的this指向s，s里面刚好有a：1，b：2和传入的数组参数3，4直接相加即可。下面请看另一个例子：

    var a=11;

var b=12;

function add(c,d){

return this.a + this.b + c + d;

}

var s = {a:1, b:2};

console.log(add(3,4))

跟上面代码差不多一样，就加了一个全局的a和b， 现在没有改变this指向，直接使用函数自己的，输出 =30  ，完全跟上面答案差距甚远，这个也是题外话了，因为这个函数是在全局定义的，所以this当然默认指向到window，如果你定义这个函数在一个对象里面的话，那么这个this当然指向到这个对象，题外话就不过多讲了，一不小心就扯偏了。

bind：

传入的第一个参数跟前两个一样，但是最重要的一点就是前面提到的，bind是会创建一个新的函数，当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。这个官方说的太官方了，简单点说就是会创建一个函数，但是他不会自动执行，比较被动，哈哈哈哈哈哈哈哈哈。言归正传

bind的话我用的比较多的是在react里面绑定函数，举个网上的例子

var name="xiaoming";

var demo={

name:"xiaohong",

getName:function(){return this.name;}

}

var another=demo.getName;

console.log(another())        //xiaoming

是不是没有达到预期的效果，这样子没有达到预期的效果，因为当你another这个函数的时候，是在window环境中进行的，会拿出window里的name=xiaoming打印出来，这就是bind比较坑的点，但是也有自己的好处。请看下面：

var another2=another.bind(demo);

console.log(another2());   //xiaohong

bind是会先创建一个新的函数，然后把你传入的对象进行改变this，然后把那个新的函数返还给你，不像call 和apply一样可以传值以后自动执行，后面需要自己执行才可以达到预期的效果，但是这样做有个好处就是能时刻自己控制住this的指向，还有偏函数，好多东西，以后再慢慢讲吧。

react里面用bind比较多，比如 当绑定一个事件，1.使用箭头函数，2.使用bind进行绑定，比如

onChange={this.handleChange.bind(this)}   这种用法比较多，一般都是放在构造函数进行bind绑定this。

讲的都是一些比较入门的call apply bind ，但是更多的还要大家一起学习去探索。写的比较烂，还请大家多包涵，有什么不对的请大家尽力指出来，学无止境嘛。

转载于:https://juejin.im/post/5bdd9dc8e51d4549d83aae25