在js中call()、apply()与bind()的理解分析

女爷i 2022-01-27 12:25 246阅读 0赞

一、call() 方法

1.  call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
2.  语法格式  
    `fun.call(thisArg[,arg1[, arg2[, ...]]])`
3.  参数说明  
    1）**thisArg**  
    在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数在非严格模式下运行，则指定为 null 和 undefined 的 this 值会自动指向全局对象（浏览器中就是 window 对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象  
    2）**arg1, arg2, …**  
    指定的参数列表
4.  返回值  
    使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined
5.  描述  
    1）call() 允许为不同的对象分配和调用属于一个对象的函数/方法  
    2）call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）
6.  实例说明  
    1）使用 call 方法调用父构造函数  
    代码如下：

2）使用 call 方法调用匿名函数  
代码如下：

3）使用 call 方法调用函数并且指定上下文的 “this”  
代码如下：

function greet() { 
      var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
      console.log(reply);
    }
    
    var obj = { 
      animal: 'cats', sleepDuration: '12 and 16 hours'
    };
    
    greet.call(obj);  // cats typically sleep between 12 and 16 hours

4）使用 call 方法调用函数并且不指定第一个参数（argument）  
代码如下：

var sData = 'Wisen';
    
    function display() { 
      console.log('sData value is %s ', this.sData);
    }
    
    display.call();  // sData value is Wisen

5）在严格模式下，this 的值将会是 undefined  
代码如下：

'use strict';
    var sData = 'Wisen';
    
    function display() { 
      console.log('sData value is %s ', this.sData);
    }
    
    display.call(); // Cannot read the property of 'sData' of undefined

二、apply()方法

1.  apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
2.  call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。
3.  语法格式  
    `fun.apply(thisArg[, argsArray])`
4.  参数说明  
    1）**thisArg**  
    可选的，在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。  
    2）**argsArray**  
    可选的，一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。
5.  返回值  
    调用有指定this值和参数的函数的结果
6.  描述  
    1）在调用一个存在的函数时，你可以为其指定一个 this 对象。 this 指当前对象，也就是正在调用这个函数的对象。 使用 apply， 你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。  
    2）apply 与 call() 非常相似，不同之处在于提供参数的方式。apply 使用参数数组而不是一组参数列表。apply 可以使用数组字面量（array literal），或数组对象。  
    3）可以使用 arguments对象作为 argsArray 参数， arguments 是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数。 这样，你在使用apply函数的时候就不需要知道被调用对象的所有参数。 你可以使用arguments来把所有的参数传递给被调用对象 ，被调用对象接下来就负责处理这些参数。  
    4）可以使用任何种类的类数组对象，就是说只要有一个 length 属性和(0…length-1)范围的整数属性，但是Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。
7.  实例说明  
    1）用 apply 将数组添加到另一个数组  
    代码如下：

var array = ['a', 'b'];
    var elements = [0, 1, 2];
    array.push.apply(array, elements);
    console.info(array); // ["a", "b", 0, 1, 2]

2）使用apply和内置函数  
代码如下：

/* 找出数组中最大/小的数字 */
    var numbers = [5, 6, 2, 3, 7];
    
    /* 应用(apply) Math.min/Math.max 内置函数完成 */
    var max = Math.max.apply(null, numbers); /* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */
    var min = Math.min.apply(null, numbers);
    
    /* 代码对比： 用简单循环完成 */
    max = -Infinity, min = +Infinity;
    
    for (var i = 0; i < numbers.length; i++) { 
      if (numbers[i] > max)
        max = numbers[i];
      if (numbers[i] < min) 
        min = numbers[i];
    }

3）使用apply来链接构造器  
代码如下：

Function.prototype.construct = function (aArgs) { 
      var oNew = Object.create(this.prototype);
      this.apply(oNew, aArgs);
      return oNew;
    };

4）替换Object.create()方法  
a. **Using Object.proto**  
代码如下：

Function.prototype.construct = function (aArgs) { 
      var oNew = { };
      oNew.__proto__ = this.prototype;
      this.apply(oNew, aArgs);
      return oNew;
    };

b. **使用闭包**  
代码如下：

Function.prototype.construct = function(aArgs) { 
      var fConstructor = this, fNewConstr = function() { 
        fConstructor.apply(this, aArgs);
      };
      fNewConstr.prototype = fConstructor.prototype;
      return new fNewConstr();
    };

c. **使用 Function 构造器**  
代码如下：

Function.prototype.construct = function (aArgs) { 
      var fNewConstr = new Function("");
      fNewConstr.prototype = this.prototype;
      var oNew = new fNewConstr();
      this.apply(oNew, aArgs);
      return oNew;
    };

三、bind()方法

1.  bind()方法创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。
2.  语法格式  
    `fun.bind(thisArg[, arg1[, arg2[, ...]]])`
3.  参数说明  
    1）**thisArg**  
    调用绑定函数时作为this参数传递给目标函数的值。 如果使用new运算符构造绑定函数，则忽略该值。当使用bind在setTimeout中创建一个函数（作为回调提供）时，作为thisArg传递的任何原始值都将转换为object。如果bind函数的参数列表为空，执行作用域的this将被视为新函数的thisArg。  
    2）**arg1, arg2, …**  
    当目标函数被调用时，预先添加到绑定函数的参数列表中的参数。
4.  返回值  
    返回一个原函数的拷贝，并拥有指定的this值和初始参数。
5.  描述  
    1）bind() 函数会创建一个新绑定函数（bound function，BF）。绑定函数是一个exotic function object（怪异函数对象，ECMAScript 2015中的术语），它包装了原函数对象，调用绑定函数通常会导致执行包装函数。  
    2）绑定函数的内部属性  
    a. \[\[BoundTargetFunction\]\] - 包装的函数对象  
    b. \[\[BoundThis\]\] - 在调用包装函数时始终作为this值传递的值  
    c. \[\[BoundArguments\]\] - 列表，在对包装函数做任何调用都会优先用列表元素填充参数列表  
    d. \[\[Call\]\] - 执行与此对象关联的代码，通过函数调用表达式调用，内部方法的参数是一个this值和一个包含通过调用表达式传递给函数的参数的列表  
    3）绑定函数也可以使用new运算符构造，它会表现为目标函数已经被构建完毕了似的，提供的this值会被忽略，但前置参数仍会提供给模拟函数。
6.  实例说明：  
    1）创建绑定函数  
    代码如下：

this.x = 9;    // 在浏览器中，this指向全局的 "window" 对象
    var module = { 
      x: 81,
      getX: function() {  return this.x; }
    };
    
    module.getX(); // 81
    
    var retrieveX = module.getX;
    retrieveX();   
    // 返回9 - 因为函数是在全局作用域中调用的
    
    // 创建一个新函数，把 'this' 绑定到 module 对象
    // 新手可能会将全局变量 x 与 module 的属性 x 混淆
    var boundGetX = retrieveX.bind(module);
    boundGetX(); // 81

2）偏函数  
代码如下：

function list() { 
     return Array.prototype.slice.call(arguments);
    }
    
    function addArguments(arg1, arg2) { 
       return arg1 + arg2
    }
    
    var list1 = list(1, 2, 3); // [1, 2, 3]
    
    var result1 = addArguments(1, 2); // 3
    
    // 创建一个函数，它拥有预设参数列表。
    var leadingThirtysevenList = list.bind(null, 37);
    
    // 创建一个函数，它拥有预设的第一个参数
    var addThirtySeven = addArguments.bind(null, 37); 
    
    var list2 = leadingThirtysevenList(); 
    // [37]
    
    var list3 = leadingThirtysevenList(1, 2, 3); 
    // [37, 1, 2, 3]
    
    var result2 = addThirtySeven(5); 
    // 37 + 5 = 42 
    
    var result3 = addThirtySeven(5, 10);
    // 37 + 5 = 42 ，第二个参数被忽略

3）配合 setTimeout  
代码如下：

4）作为构造函数使用的绑定函数  
代码如下：

5）快捷调用  
代码如下：

var unboundSlice = Array.prototype.slice;
    var slice = Function.prototype.apply.bind(unboundSlice);
    
    // ...
    
    slice(arguments);

6）在没有内置实现支持的环境中也可以部分地使用bind  
代码如下：

if (!Function.prototype.bind) { 
      Function.prototype.bind = function(oThis) { 
        if (typeof this !== 'function') { 
          // closest thing possible to the ECMAScript 5
          // internal IsCallable function
          throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
        }
    
        var aArgs   = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP    = function() { },
            fBound  = function() { 
              // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
              return fToBind.apply(this instanceof fBound
                     ? this
                     : oThis,
                     // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                     aArgs.concat(Array.prototype.slice.call(arguments)));
            };
    
        // 维护原型关系
        if (this.prototype) { 
          // Function.prototype doesn't have a prototype property
          fNOP.prototype = this.prototype; 
        }
        // 下行的代码使fBound.prototype是fNOP的实例,因此
        // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
        fBound.prototype = new fNOP();
    
        return fBound;
      };
    }

四、call()、apply()和bind() 方法的总结

1.  call() 、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数，bind() 就是将某个函数绑定到某个对象上。
2.  call() 方法的第二个参数是允许传递参数列表，而apply()方法的第二个参数必须是数组，也可以是类数组对象，但是在传递给调用函数的时候，是以参数列表的形式进行传递的。
3.  call()和apply()方法会对目标函数自动执行，从而导致它无法在事件绑定函数中使用。事件绑定函数不需要我们手动执行，它是在事件被触发时由JS内部自动执行的，但是bind()方法可以在实现改变函数this的同时又不会自动执行目标函数，  
    举例：

var obj6 = { name:"张三"};
        // 张三 p1 p2 bind()不会立即执行，需要点击页面，然后控制台才会输出，可作为事件绑定函数
        document.addEventListener("click",EventClick.bind(obj6,"p1","p2"),false);
        // 张三 p1 p2 call()方法会自动立即执行，一打开控制台之间输出
       // document.addEventListener("click",EventClick.call(obj6,"p1","p2"),false);
        function EventClick(a,b){ 
            console.log(this.name,a,b);
        }

说明：在绑定事件监听函数以后，使用call()方法，在打开浏览器执行以后，控制台会自动输出值，绑定的事件监听函数失效了。但是在使用bind()方法，在打开浏览器执行以后，控制台不会自动输出值，当点击页面以后，事件监听函数生效，控制台才会输出值。