快速理解JavaScript中的call、apply、bind的方法

在JavaScript中，call、apply和bind是Function對象自帶的三個方法，這三個方法的主要做用是改變函數中的this指向。

call、apply、bind方法的共同點和區別：

1. 都是用來改變函數的this對象的指向的；

2. 第一個參數都是this要指向的對象，也就是想指定的上下文；

3. 均可以利用後續參數傳參；

call、apply、bind方法的不一樣點：

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

1、call

call()

語法：

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定義：

調用一個對象的一個方法，以另外一個對象替換當前對象。

說明：

call 方法能夠用來代替另外一個對象調用一個方法。

call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

thisObj的取值有如下4種狀況：

（1） 不傳，或者傳null,undefined， 函數中的this指向window對象。

（2） 傳遞另外一個函數的函數名，函數中的this指向這個函數的引用。

（3） 傳遞字符串、數值或布爾類型等基礎類型，函數中的this指向其對應的包裝對象，如 String、Number、Boolean。

（4） 傳遞一個對象，函數中的this指向這個對象。

經常使用場景：

原型的繼承:

Function Student(){

Person.call(this,arguments);

}

用Student對象代替Person對象，這時Student能夠繼承Person上面全部的方法和屬性；

2、apply()

語法：

apply([thisObj[,argArray]])

定義：

應用某一對象的一個方法，用另外一個對象替換當前對象。

說明：

若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將報錯。 若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj， 而且沒法被傳遞任何參數。

call 和 apply的區別： 做用徹底同樣，只是call按順序接收參數，apply把參數放在數組裏面；

Call和apply的使用場景區分：

參數是明確知道數量時用 call ；

而不肯定的時候用 apply，而後把參數 push 進數組傳遞進去；

3、bind

bind是在ES6中擴展的方法（IE6,7,8不支持）

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

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

注意：bind方法的返回值是函數

理解運用apply、call：

一、當傳入參數的個數是不肯定的時候，打印出函數傳入的全部參數？

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

log(1)； 1
Log(1,2) 1,2
複製代碼

二、給每個 log 消息添加一個"(app)"的前輟？

Function log(){
var args=Array.prototype.slice.call(arguments);
Args.unshift(「app」);
Console.log.apply(console,args);
}
複製代碼

總結：

1. apply 、 call 、bind 三者都是用來改變函數的this對象的指向的；

2. 三者第一個參數都是this要指向的對象，也就是想指定的上下文；

3. 三者均可以利用後續參數傳參；

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

附：IE6-8自定義bind方法(IE6-8不兼容bind)

原理：

經過對Function的prototype原型進行擴展，能夠爲IE6~8自定義bind方法。

代碼以下：

if (!function() {}.bind) {
   Function.prototype.bind = function(context) {
       var self = this
           , args = Array.prototype.slice.call(arguments);

       return function() {
           return self.apply(context, args.slice(1));    
       }
   };
}
複製代碼

一、用call爲函數的參數綁定splice方法；

二、給Function函數的this改變成bind傳入的this對象；

三、把參數從第二個計算(第一個是傳入的this對象)；