call,apply 和 bind 的对比分析

一、共同点

都能改变函数的执行的上下文，就是函数里this指向的对象

1、  call ,apply,bind

call和apply都是用来调用函数的，例如：

var isOn=true;
var lightBulb={
          toggle:function(){
                  console.log(this.isOn);
                  return this.isOn;
          },
          isOn:false
}

lightbulb.toggle.call();然后这里为什么要用call来调用来多此一举呢，因为call和apply能改变this的指向，就是能动态决定this指向问题。

toggle=lightBulb.toggle;

toggle ();   //输出true ，this指向的是window

 

lightBulb.toggle();//输出false， this指向的是lightBulb

如果要改变第一种调用的方式下this的指向，仍然指向lightBulb；可以利用call和apply来改变this的指向，像下面这样调用：

toggle=lightBulb.toggle;

toggle .call(lightBulb);  //输出false

toggle .apply (lightBulb)   //输出false

然而用来改变函数执行的上下文，bind同样可以做到，例如：

toggle=lightBulb.toggle;

toggle .bind(lightBulb)();  //输出false

2、  call,apply的差异

当然call和apply也是不一样的，这个通常书本上都会介绍，它们在后面参数化形式不一样，具体调用如下例子：

varcountry='American';
var person={
          toggle:function(name,sex){
                  this.name=name;
                  this.sex=sex;
                  return[this.name,this.sex,this.country]
          },
          name:'jack',
          sex:'male',
          country:'China'
}       vartoggle=person.toggle;
var woman1=toggle.call(person,'rose','female');
 
var arguments=['kate','female'];
var woman2= toggle.apply(person,arguments);
console.log(woman1);  //["rose", "female","China"]
console.log(woman2);  //["kate", "female","China"]

二、不同点

1、  call和apply所绑定的this上下文指向是临时的，每次调用都要注意，而bind是将函数的this指向与目标对象绑定，返回的是个绑定this上下文的函数，比较稳定。

2、  call和apply是绑定之后立马执行该函数，bind只是绑定目标对象并不执行。

Bind是es5里面的方法，有些浏览器是不支持的。例如ie6，7，8；因此可以自己实现这个函数

Function.prototype.bind=function(context){
          varself=this;
          returnfunction(args){
                  returnself.apply(context,arguments);
          }
}