如何理解和熟练运用js中的call及apply？

一个对象A的方法被另一个对象B【引用】的时候（请注意引用的意思，区分调用）；
对象A方法内的this作用域就不指向对象A了，这个时候你再用this.XX项调用对象A的某个属性就会发生错误。

详情见下例:

  var aHello = {    
      name : "hello",   
      showName : function(){        
          console.log(this.name);        
          //console.log(this.tagName);    
      }
  };
  document.querySelector('a').onclick = aHello.showName;  // 为空

这个时候因为对象aHello的方法showName被对象document.querySelector('a')引用，所以showName内的this就不指向aHello了，指向对象document.querySelector('a')，可以去掉注释进行验证。

但是我们的需求是，点击a的时候就显示aHello的名称。这个时候该怎么做呢？

• 方法一：在onclick的时候改用匿名函数，匿名函数内再调用对象aHello的方法；

  document.querySelector('a').onclick = function(){    
      aHello.showName();
  };

ok！开心的解决了；
然而，是不是觉得太怂了。我们来衍生一下第二种方法，然后再说bind和call和apply的区别；

• 方法二：因为引用， onclick改变了对象aHello "showName" 内this的指向。所以我们必须在【引用】的时候对showName方法进行重新绑定新的指向;

  document.querySelector('a').onclick = aHello.showName.bind(aHello);

恩！高大上，不用写太多代码。
接下来讲一下bind和apply、call的区别,首先这些方法多属于【原型prototype】的方法。

示例：

  var test = {    
      name : "hello",    
      setYourAge : function(name,age){        
          console.log(name);        
          console.log(age);    
      }
  };
  document.querySelector('a').onclick = test.setYourAge.call(test,'王佳欣',25);

• 这个时候你可以看到打开页面，浏览器控制台就会马上输出 “王佳欣”，“25”；
• 然后，你再点击的时候，根本不会，再输出的；ok，这就是 【调用】含义；
• call和apply是调用对象方法的意思；也就是说下面的3句代码其实实现是一样的；

  test.setYourAge.call(test,'王佳欣1',25);
  test.setYourAge.apply(test,['王佳欣2',25]);
  test.setYourAge('王佳欣3',25);

既然可以直接调用干嘛还要call、apply方法呢，这里先说一下call、apply 和bind的区别吧~！

  document.querySelector('a').onclick = test.setYourAge.bind(test,'王佳欣4',25);

• bind的作用是【引用】，这个时候你打开浏览器控制台不会有输出。你点击a 标签的后，才会有输出，点一次，输出一次。
• 粗暴一点说，这就是区别马上【调用】和【引用】的区别。

上面我们说到，下面三局代码实现是一样的【代码详情见上】。那么call、apply有什么作用呢？

• call、apply有什么作用大家开发中是不是有这样的需求（我总是喜欢用需求来作为入口）
• 我们经常会在我们项目中做一些通用的对象，这些对象用来处理我们的一些通用的过程。
• 比如：通用验证方法；(注：很多人喜欢用 继承的基础类 来作为例子.....我一时想不到好的继承例子，就用通用类的例子吧！)

  //通用验证对象
  var validator = {    
      validateName : function(){        
          console.log(this.name);    
      },   
      validateAge  : function(){        
          console.log(this.age)   
      }    
      //.....
  };

• 这里可以看到我们的【通用对象validator】内，是没有定义属性（name、age）的。
• 这个时候比如我们有两个对象需要验证；

  //对象kobe
  var kobe = {    
      name : 'kobe bryant',    
      age : -1
  };

  //对象allen
  var allen = {    
      name : 'allen iverson',    
      age  : 10
  };

  //那我们调用验证的时候就需要用到call或者apply了；例如：
  var isKobeAgeValid = validator.call(kobe);
  var isAllenAgeValid = validator.call(allen);

大致差不多就是这样了....