call / apply / bind 的区别 应用及apply

上一篇:关于this指向的问题
然而call \ apply \ bind一般也是常用来指定this的指向的

• 先来看一下call apply bind的区别

  call([thisObj[,arg1[, arg2[, [,.argN]]]]]):,提供thisObj改变this指向,不传将指向globlal. arg1 … argN为被调用方法的传参依次传入

      function hello(name,age){
         console.log(name);
        console.log(age);
      }
      hello.call(this,"tsrot",24);
  

  apply([thisObj,[arg1,arg2,...]]):,提供thisObj改变this指向,不传将指向globlal. arg1 … argN为被调用方法的传参一次传入

      function hello(name,age){
         console.log(name);
        console.log(age);
      }
      hello.call(this,["tsrot",24]);
  

  bind([thisObj[,arg1[, arg2[, [,.argN]]]]]):,thisObj如果未传，那么 Global 对象被用作 thisObj。arg1 … argN可传可不传。如果不传，可以在调用的时候再传。如果传了，调用的时候则可以不传，调用的时候如果你还是传了，则不生效

   var person = {
      name:"tsrot",
      age:24,
      sayHello:function(age){
          console.log(this.name);
          console.log(age);
      }
   };
    var son = {
     name:"xieliqun"
     };
    //arg1 … argN不传,在调用的时候再传
    var boundFunc = person.sayHello.bind(son);
    boundFunc(25);
    //直接传入arg1 … argN,调用的时候则可以不传
    var boundFunc = person.sayHello.bind(son,25);
    boundFunc(); 
  //如果在bind()中直接传入,调用的时候也传了,则不生效
  

  总结:

  1. call参数依次传入,apply参数一个数组直接传入.bind参数可传(调用时不用传),可不传(调用时再传)
  2. call和apply直接执行函数，而bind需要再一次调用

• call apply bind 应用 (应用场景)

  • call

    • call继承

      function Animal(name) {
              this.name = name;
              this.showName = function () {
              console.log(this.name);//Black Cat
            }
       }
      function Cat(name) {
          Animal.call(this, name); 
      }
      var cat = new Cat('Black Cat');
      cat.showName(); 
      

    • call将伪数组转化为数组

        var fakeArr = {0:'a',1:'b',length:2};
      // var arr1 = [].slice.call(fakeArr);
       var arr1 = Array.prototype.slice.call(fakeArr);
       console.log(arr1[0]); //a
       //var arr2 = Array.prototype.slice.call(fakeArr);
         var arr2 = [].slice.call(fakeArr);
       console.log(arr2[0]); //a
         arr1.push("c");
       console.log(arr1); //["a", "b", "c"]
      

  • apply

    • 数组追加

        var array1 = [1 , 2 , 3, 5];
        var array2 = ["xie" , "li" , "qun" , "tsrot"];
           //[].push.apply(array1, array2);
        Array.prototype.push.apply(array1, array2);
        console.log(array1);//[1, 2, 3, 5, "xie", "li", "qun", "tsrot"]
      

    • 获取数组中的最大值和最小值

         var num = [1,3,5,7,2,-10,11];
          var maxNum = Math.max.apply(Math, num);
            var minNum = Math.min.apply(Math, num);
          console.log(maxNum); //11
          console.log(minNum); //-10
      

  • bind 保存this变量

    var foo = {
        bar : 1,
        eventBind: function(){
            var _this = this ;
            $('.someClass').on('click',function(event) {
                console.log(_this.bar);     
            });
        }
    }
    var foo = {
        bar : 1,
        eventBind: function(){
            $('.someClass').on('click',function(event) {
                console.log(this.bar);      
            }.bind(this));
        }
    }
    

• apply实现原理

  •  //原生封装
     Function.prototype.myBind = function () {
         let obj = arguments[0];
         let arg = [].slice.call(arguments, 1);
         let that = this;
         return function () {
             let arg1=[].slice.call(arguments);
             that.apply(obj, arg.concat(arg))
         }
     };
     //ES6封装
         Function.prototype.myBind = function (content, ...arg) {
             let _this = this;
             return function (...arg1) {
                 _this.apply(content, [...arg, ...arg1]);
             }
         }
         let f = fn.myBind([], 1, 2, 3);
         f()
    

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////