call, apply, bind

作用

• 改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。
• apply 、 call 、bind三者第一个参数都是this要指向的对象，也就是想指定的上下文（函数的每次调用都会拥有一个特殊值——本次调用的上下文（context）——这就是this关键字的值。）；
• bind 是返回对应函数，便于稍后调用；apply 、call则是立即调用 。

call

定义：b.call(a) 就相当于把b里面的作用域强行指向到a里面去。
语法：

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

function a(){   
  console.log(this);  
}       

function b(){}       

var c={name:"call"};    //定义对象c  
a();//window
a.call();   //window
a.call(null);   //window
a.call(undefined);   //window
a.call(1);   //Number
a.call('');   //String
a.call(true);   //Boolean
a.call(b);   //function b(){}
a.call(c);   //Object

• 说明call()里面可以放字符串，数值或布尔类型等基础类型。函数中的this指向其对应的包装对象，如 String、Number、Boolean
• 如果传一个函数名,函数中的this指向这个函数的引用。
• 传递一个对象，函数中的this指向这个对象。
• 括号里面第一个参数一定是this作用域要去到的地方，第二三四...个参数是该作用域里用到的值。

例子1：

function eat(x,y){   
  console.log(x+y);   
}   
function drink(x,y){   
  console.log(x-y);   
}   
eat.call(drink,3,2);

//输出：5
//把eat的作用域指向drink
//eat.call(drink,3,2) == eat(3,2)

例子2：

function Animal(){   
  this.name="animal";   
  this.showName=function(){   
    console.log(this.name);   
  }   
}   
function Dog(){   
  this.name="dog";   
}   
var animal=new Animal();   
var dog=new Dog();       

animal.showName.call(dog);

//输出：dog

apply()

• 作用和call()一样。区别在于接受参数的方式不太一样。
• call()里面放的是东西是函数名等等...
• apply()里放的是数组。

直观看call于apply的区别：

function class1(args1,args2){       
  this.name=function(){      
   console.log(args,args);      
  }     
}     
function class2(){    
  var args1="1";
  var args2="2";
  class1.call(this,args1,args2);  
  /*或*/
  class1.apply(this,[args1,args2]);
}

var c=new class2();   
c.name();

输出：1 2

fn.call(obj, arg1, arg2, arg3...);
fn.apply(obj, [arg1, arg2, arg3...]);

call需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

如何抉择用call和apply

• 当你的参数是明确知道数量时用 call
• 而不确定的时候用 apply，然后把参数 push 进数组传递进去。

bind(es6)

bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

• 注意：bind方法的返回值是函数

var bar=function(){   
  console.log(this.x);   
}
var foo={ 
     x:3   
}   
bar();  
bar.bind(foo)();
 /*或*/
var func=bar.bind(foo);   
func();

输出：
//undefined
//3

参考文章

JS中的call、apply、bind方法