JS中的call、apply、bind方法詳解

時間 2019-12-01

原文原文鏈接

bind 是返回對應函數，便於稍後調用；apply 、call 則是當即調用。javascript

apply、call

在 javascript 中，call 和 apply 都是爲了改變某個函數運行時的上下文（context）而存在的，換句話說，就是爲了改變函數體內部 this 的指向。
JavaScript 的一大特色是，函數存在「定義時上下文」和「運行時上下文」以及「上下文是能夠改變的」這樣的概念。java

function fruits() {}
 
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
 
var apple = new fruits;
apple.say();    //My color is red

可是若是咱們有一個對象banana= {color : "yellow"} ,咱們不想對它從新定義 say 方法，那麼咱們能夠經過 call 或 apply 用 apple 的 say 方法：面試

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

因此，能夠看出 call 和 apply 是爲了動態改變 this 而出現的，當一個 object 沒有某個方法（本栗子中banana沒有say方法），可是其餘的有（本栗子中apple有say方法），咱們能夠藉助call或apply用其它對象的方法來操做。數組

apply、call 區別

對於 apply、call 兩者而言，做用徹底同樣，只是接受參數的方式不太同樣。例如，有一個函數定義以下：瀏覽器

var func = function(arg1, arg2) {
     
};

就能夠經過以下方式來調用：app

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

其中 this 是你想指定的上下文，他能夠是任何一個 JavaScript 對象(JavaScript 中一切皆對象)，call 須要把參數按順序傳遞進去，而 apply 則是把參數放在數組裏。　　
爲了鞏固加深記憶，下面列舉一些經常使用用法：dom

apply、call實例

數組之間追加

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]

獲取數組中的最大值和最小值

var  numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers),   //458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

number 自己沒有 max 方法，可是 Math 有，咱們就能夠藉助 call 或者 apply 使用其方法。函數

驗證是不是數組（前提是toString()方法沒有被重寫過）

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

類（僞）數組使用數組方法

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

Javascript中存在一種名爲僞數組的對象結構。比較特別的是 arguments 對象，還有像調用 getElementsByTagName , document.childNodes 之類的，它們返回NodeList對象都屬於僞數組。不能應用 Array下的 push , pop 等方法。
可是咱們能經過 Array.prototype.slice.call 轉換爲真正的數組的帶有 length 屬性的對象，這樣 domNodes 就能夠應用 Array 下的全部方法了。ui

面試題

定義一個 log 方法，讓它能夠代理 console.log 方法，常見的解決方法是：this

function log(msg)　{
  console.log(msg);
}
log(1);    //1
log(1,2);    //1

上面方法能夠解決最基本的需求，可是當傳入參數的個數是不肯定的時候，上面的方法就失效了，這個時候就能夠考慮使用 apply 或者 call，注意這裏傳入多少個參數是不肯定的，因此使用apply是最好的，方法以下：

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

接下來的要求是給每個 log 消息添加一個"(app)"的前輟，好比：

log("hello world"); //(app)hello world

該怎麼作比較優雅呢?這個時候須要想到arguments參數是個僞數組，經過 Array.prototype.slice.call 轉化爲標準數組，再使用數組方法unshift，像這樣：

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
 
  console.log.apply(console, args);
};

bind

在討論bind()方法以前咱們先來看一道題目：

var altwrite = document.write;
altwrite("hello");

結果：Uncaught TypeError: Illegal invocation
altwrite()函數改變this的指向global或window對象，致使執行時提示非法調用異常，正確的方案就是使用bind()方法：

altwrite.bind(document)("hello")

固然也可使用call()方法：

altwrite.call(document, "hello")

綁定函數

bind()最簡單的用法是建立一個函數，使這個函數不論怎麼調用都有一樣的this值。常見的錯誤就像上面的例子同樣，將方法從對象中拿出來，而後調用，而且但願this指向原來的對象。若是不作特殊處理，通常會丟失原來的對象。使用bind()方法可以很漂亮的解決這個問題：

this.num = 9; 
var mymodule = {
  num: 81,
  getNum: function() { 
    console.log(this.num);
  }
};

mymodule.getNum(); // 81

var getNum = mymodule.getNum;
getNum(); // 9, 由於在這個例子中，"this"指向全局對象

var boundGetNum = getNum.bind(mymodule);
boundGetNum(); // 81

bind() 方法與 apply 和 call 很類似，也是能夠改變函數體內 this 的指向。

MDN的解釋是：bind()方法會建立一個新函數，稱爲綁定函數，當調用這個綁定函數時，綁定函數會以建立它時傳入 bind()方法的第一個參數做爲 this，傳入 bind() 方法的第二個以及之後的參數加上綁定函數運行時自己的參數按照順序做爲原函數的參數來調用原函數。

直接來看看具體如何使用，在常見的單體模式中，一般咱們會使用 _this , that , self 等保存 this ，這樣咱們能夠在改變了上下文以後繼續引用到它。像這樣：

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

因爲 Javascript 特有的機制，上下文環境在 eventBind:function(){ } 過渡到 $('.someClass').on('click',function(event) { }) 發生了改變，上述使用變量保存 this 這些方式都是有用的，也沒有什麼問題。固然使用 bind() 能夠更加優雅的解決這個問題：

var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(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

這裏咱們建立了一個新的函數 func，當使用 bind() 建立一個綁定函數以後，它被執行的時候，它的 this 會被設置成 foo ，而不是像咱們調用 bar() 時的全局做用域。

偏函數（Partial Functions）

Partial Functions也叫Partial Applications，這裏截取一段關於偏函數的定義：

Partial application can be described as taking a function that accepts some number of arguments, binding values to one or more of those arguments, and returning a new function that only accepts the remaining, un-bound arguments.

bind()的另外一個最簡單的用法是使一個函數擁有預設的初始參數。只要將這些參數（若是有的話）做爲bind()的參數寫在this後面。當綁定函數被調用時，這些參數會被插入到目標函數的參數列表的開始位置，傳遞給綁定函數的參數會跟在它們後面。

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 預約義參數37
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

和setTimeout一塊兒使用

function Bloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// 1秒後調用declare函數
Bloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 100);
};

Bloomer.prototype.declare = function() {
  console.log('我有 ' + this.petalCount + ' 朵花瓣!');
};

var bloo = new Bloomer();
bloo.bloom(); //我有 5 朵花瓣!

注意：對於事件處理函數和setInterval方法也可使用上面的方法

綁定函數做爲構造函數

綁定函數也適用於使用new操做符來構造目標函數的實例。當使用綁定函數來構造實例，注意：this會被忽略，可是傳入的參數仍然可用。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function() { 
  console.log(this.x + ',' + this.y);
};

var p = new Point(1, 2);
p.toString(); // '1,2'


var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
// 實現中的例子不支持,
// 原生bind支持:
var YAxisPoint = Point.bind(null, 0/*x*/);

var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new Point(17, 42) instanceof YAxisPoint; // true

捷徑

bind()也能夠爲須要特定this值的函數創造捷徑。

例如要將一個類數組對象轉換爲真正的數組，可能的例子以下：

var slice = Array.prototype.slice;

// ...

slice.call(arguments);

若是使用bind()的話，狀況變得更簡單：

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments);

實現

上面的幾個小節能夠看出bind()有不少的使用場景，可是bind()函數是在 ECMA-262 第五版才被加入；它可能沒法在全部瀏覽器上運行。這就須要咱們本身實現bind()函數了。

首先咱們能夠經過給目標函數指定做用域來簡單實現bind()方法：

Function.prototype.bind = function(context){
  self = this;  //保存this，即調用bind方法的目標函數
  return function(){
      return self.apply(context,arguments);
  };
};

考慮到函數柯里化的狀況，咱們能夠構建一個更加健壯的bind()：

Function.prototype.bind = function(context){
  var args = Array.prototype.slice.call(arguments, 1),
  self = this;
  return function(){
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply(context,finalArgs);
  };
};

此次的bind()方法能夠綁定對象，也支持在綁定的時候傳參。

繼續，Javascript的函數還能夠做爲構造函數，那麼綁定後的函數用這種方式調用時，狀況就比較微妙了，須要涉及到原型鏈的傳遞：

Function.prototype.bind = function(context){
  var args = Array.prototype.slice(arguments, 1),
  F = function(){},
  self = this,
  bound = function(){
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply((this instanceof F ? this : context), finalArgs);
  };

  F.prototype = self.prototype;
  bound.prototype = new F();
  return bound;
};

這是《JavaScript Web Application》一書中對bind()的實現：經過設置一箇中轉構造函數F，使綁定後的函數與調用bind()的函數處於同一原型鏈上，用new操做符調用綁定後的函數，返回的對象也能正常使用instanceof，所以這是最嚴謹的bind()實現。

對於爲了在瀏覽器中能支持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;
  };
}

有個有趣的問題，若是連續 bind() 兩次，亦或者是連續 bind() 三次那麼輸出的值是什麼呢？像這樣：

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
 
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是，兩次都仍將輸出 3 ，而非期待中的 4 和 5 。緣由是，在Javascript中，屢次 bind() 是無效的。更深層次的緣由， bind() 的實現，至關於使用函數在內部包了一個 call / apply ，第二次 bind() 至關於再包住第一次 bind() ,故第二次之後的 bind 是沒法生效的。

apply、call、bind比較

那麼 apply、call、bind 三者相比較，之間又有什麼異同呢？什麼時候使用 apply、call，什麼時候使用 bind 呢。簡單的一個栗子：

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