call apply bind的联系与区别

   我是昨天看的这部分知识，怎么说呢，别人的博客都是在自己精通的情况下用尽量让所有人都懂的语言来写博客，而我，致力于用最土的语言，以我自己的理解来学习，来编写，方便以后巩固和学习，不免那里理解的不到位，都是以后要修改的伏笔！是啊！昨天情人节，被狗粮养的我今天激情澎湃！

   步入正题，说道call，我想起的第一个事情就是学this的时候，哪里经常出现这个词，不过介于我连this都不是很牢靠，所以这里只说对于call的理解。

   和call一样，apply基本也是那个时候见到的！用法差不多，就是参数上有些不同罢了，比如call的参数可以直接写出来，但是apply却要以数组的形式！尊素不本质呢！也不怕上天有神淋！不努力就吸啊！嘻嘻···

  好了，接下来就不得不来一个例子了！不然只说的话，我也怕以后自己会用小拳拳锤自己胸口啊！哼！也不给自己机会！皮皮虾，我们走！！！

  function people(){}

  people.prototype = {

      name : "Dianzhang",

      love : function(){

            console.log(this.name+"best lover is Luoyihang" );

      }

  }

  var dianzhang = new peolple;

  dianzhang.love();   //Dianzhang best lover is Luoyihang;

但是呢，人生并没有那么圆满啊，不是任何事都是可以走钢索的啊！  店长爱罗一航我们都知道，但是店长有很多啊，但是宫政就只有一个啊！所以····现有 Gongzheng = {name : "Gongzheng"};那么厉害了，我想让宫政最爱的人是罗一航，怎么办？挺急的。在线等！   等毛线啊！call in不得了！ 再次我们给他“请”过来啊！

   dianzhang.love.call(Gongzheng);

   dianzhang.love.apply(Gongzheng);

　没错啊！这两个的结局都是Gongzheng bset lover is Luoyihang!

  好了好了，知道他俩是一对了！下一题！！！

  等一下！慌个皮皮虾啊！还没讲细节呢！  就是啊！总结一下，所有call,apply就是为了动态改变this，把一个对象没有的方法通过call，apply去替换，你看上面那个吧！ Gongzheng本身并没有love方法，但是people有啊！而dianzhang又new了people一下，所以dianzhang有啊！ 这么一来，我们用dianzhang去call Gongzheng,等于用Gongzheng里面的name去替换dianzhang的name，apply同理喽！

  至于他俩的区别，刚才不是说了，参数问题嘛！另外的话，如果确定参数个数，可以用call，不确定的话，最好用apply，当然啦！还是数组格式~~

　　var func = function(arg1,arg2){}

　　func.call(this,arg1,arg2);

　　func.apply(this,[arg1,arg2]);

　　接下来我们介绍一下他俩一些常见的用法

　　首当其冲，我们知道apply用来push数组再合适不过了

　　var array1 = [12 , "foo" , {name "Joe"} , -2458];

　　var array2 = ["Doe" , 555 , 100];

　　Array.prototype.push.apply(array1, array2); 

　　/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

 

     其次呢，他俩都是可以借代Math的方法来获取最大数的哦~

 

　　var  numbers = [5, 458 , 120 , -215 ];

　　var maxInNumbers = Math.max.apply(Math, numbers),   //458

　　maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

 

     还有不得不说的可以验证是否是数组啊！

 

　　functionisArray(obj){  　　

　　　　return Object.prototype.toString.call(obj) === '[object Array]' ;

　　}；

 

 

 

   像我这种懒癌患者，怎么可能会自己再整个题目呢！正好看到一大牛写的不错，赶紧就撸下来啊！  如果不小心被发现，侵权什么的，正好啊！正好认识一下，以后更方便啦！想想还有些小激动！尊素想咕咕day呢！

 

 

 

 

 

接下来就是bind啦！bind这个东西，说实话，我潜意识一直觉得他是jQuery才有的啊！因为我记得我认识他的时候他就是在jQuery啊！看来我知识浅薄，不得不膜拜啊！所谓苟·····全性命于乱世，不求闻达于诸侯啊！但是在这里呢，就不一样啦！bind他作为重量嘉宾，压轴出场，自然有他的特别之处！最明显的就是，看人家call和apply啊！只要调用就执行，这是这货他总是想搞事情！你要是不给他再来个（）！他就不会干活，也是就先买票后上车喽！

 

   我们以前呢，碰到一种函数，就是这样的：

      var foo = {

      bar : 1,

      eventBind: function(){

        var _this = this;

        $('.someClass').on('click',function(event) {

            /* Act on the event */

            console.log(_this.bar);     //1

        });

      }

    }

 

　　为什么会有_this = this这种奇葩存在呢！原因就是this的指向环境啊！在eventBind里面，this.bar确实指代的是foo里面的bar，但素呢！他函数里面还有函数啊，就是说明啊，在$('.someClass')那个里面，这时的this就是指$里面的话，换句话说，他就没有this.bar了啊！为了解决这种问题，我们通常用_this或者是that来替换this，这样。即便是在函数里面的函数，这个this还是指外部的那个上下文环境，就不会出错啦！

 

　　　是不是感觉很鸡肋？觉得很恶心！不要难过，不要着急！总有一天，拯救你的那个天使会骑着皮皮虾踏着五彩祥云来到你的面前的！是的！bind出现了！而且，针对上面的问题，我们的bind还会更加优雅的解决这个问题！是不是感觉很兴奋很激动很不可思议啊？！

 

　　

  var foo = {

      bar : 1,

      eventBind: function(){

          $('.someClass').on('click',function(event) {

              /* Act on the event */

              console.log(this.bar);      //1

          }.bind(this));

      }

  }

 

 

上述代码就是和上面那个结果一样的哦！因为bind的参数是this，这个this就是全文上下环境的this啊！在上述代码里，bind() 创建了一个函数，当这个click事件绑定在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。因此，这里我们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。然后，当回调函数被执行的时候， this 便指向 foo 对象。

 

  再来个爆栗吧！

 

  var bar = function(){

    console.log(this.x);

  }

  var foo = {

    x:3

  }

  bar(); // undefined

  var func = bar.bind(foo);

  func(); // 3

 

但是不得不友情提醒一下！你一定要记住啊！特么不要连续上车好吗？容易翻车的啊！对于老司机来说，人家都是讲究先到先得的啊！你连续的bind  bind  bind的结果就是！人家只取第一嫖啊！

 

好啦！差不多也到最后了！  再来回顾一下，从题目开始，是不是有哪里不对劲？是啊！特么讲的是call,apply,bind的联系与区别啊！区别说了一句，然后呢？然后呢？然后呢？   MDZZ，别慌啊！来个栗子不得了！

 

var obj = {

    x: 81,

};

 

var foo = {

    getX: function() {

        return this.x;

    }

}

 

console.log(foo.getX.bind(obj)());  //81

console.log(foo.getX.call(obj));    //81

console.log(foo.getX.apply(obj));   //81

 

看出来了吧？就是bind的后面多了一个括号啊！

 

够了没？够了没？够了没？！  不够自己再去查资料去！