深刻理解 call，apply 和 bind

在JavaScript 中，call、apply 和 bind 是 Function 對象自帶的三個方法，這三個方法的主要做用是改變函數中的 this 指向，從而能夠達到`接花移木`的效果。本文將對這三個方法進行詳細的講解，並列出幾個經典應用場景。

一、call(thisArgs [,args...])

該方法能夠傳遞一個thisArgs參數和一個參數列表，thisArgs 指定了函數在運行期的調用者，也就是函數中的 this 對象，而參數列表會被傳入調用函數中。thisArgs 的取值有如下四種狀況：

• 不傳，或者傳null,undefined， 函數中的 this 指向 window 對象
• 傳遞另外一個函數的函數名，函數中的 this 指向這個函數的引用
• 傳遞字符串、數值或布爾類型等基礎類型，函數中的 this 指向其對應的包裝對象，如 String、Number、Boolean
• 傳遞一個對象，函數中的 this 指向這個對象

function a(){
    console.log(this); //輸出函數a中的this對象
}
function b(){} //定義函數b

var obj = {name:'onepixel'}; //定義對象obj

a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

這是call 的核心功能，它容許你在一個對象上調用該對象沒有定義的方法，而且這個方法能夠訪問該對象中的屬性，至於這樣作有什麼好處，我待會再講，咱們先看一個簡單的例子：

var a = {

    name:'onepixel', //定義a的屬性

    say:function(){ //定義a的方法
        console.log("Hi,I'm function a!");
    }
};

function b(name){
    console.log("Post params: "+ name);
    console.log("I'm "+ this.name);
    this.say();
}

b.call(a,'test');
>>
Post params: test
I'm onepixel
I'm function a!

當執行b.call 時，字符串`test`做爲參數傳遞給了函數b,因爲call的做用，函數b中的this指向了對象a, 所以至關於調用了對象a上的函數b,而實際上a中沒有定義b 。

二、apply(thisArgs [,args[]])

apply 和 call 的惟一區別是第二個參數的傳遞方式不一樣，apply 的第二個參數必須是一個數組（或者類數組），而 call 容許傳遞一個參數列表。值得你注意的是，雖然 apply 接收的是一個參數數組，但在傳遞給調用函數時，倒是以參數列表的形式傳遞，咱們看個簡單的例子：

function b(x,y,z){
    console.log(x,y,z);
}

b.apply(null,[1,2,3]); // 1 2 3

apply 的這個特性很重要，咱們會在下面的應用場景中提到這個特性。

三、bind(thisArgs [,args...])

bind是ES5 新增的一個方法，它的傳參和call相似，但又和 call/apply 有着顯著的不一樣，即調用 call 或 apply 都會自動執行對應的函數，而 bind 不會執行對應的函數，只是返回了對函數的引用。粗略一看，bind 彷佛比call/apply 要落後一些，那ES5爲何還要引入bind 呢？

其實，ES5引入 bind 的真正目的是爲了彌補 call/apply 的不足，因爲 call/apply 會對目標函數自動執行，從而致使它沒法在事件綁定函數中使用，由於事件綁定函數不須要咱們手動執行，它是在事件被觸發時由JS 內部自動執行的。而 bind 在實現改變函數 this 的同時又不會自動執行目標函數，所以能夠完美的解決上述問題，看一個例子就能明白：

var obj = {name:'onepixel'};

/**
 * 給document添加click事件監聽，並綁定onClick函數
 * 經過bind方法設置onClick的this爲obj，並傳遞參數p1,p2
 */
document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);

//當點擊網頁時觸發並執行
function onClick(a,b){
    console.log(
            this.name, //onepixel
            a, //p1
            b  //p2
    )
}

當點擊網頁時，onClick 被觸發執行，輸出onepixel p1 p2, 說明 onClick 中的 this 被 bind 改變成了obj 對象，爲了對 bind 進行深刻的理解，咱們來看一下 bind 的 polyfill 實現：

if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
        var args = Array.prototype.slice.call(arguments, 1);
        var fToBind = this;  // this在這裏指向的是目標函數
        var fBind = function () {
            return fToBind.apply(
                // 若是外部執行var obj = new fBind(), 則將obj做爲最終的this，放棄使用oThis
                this instanceof fBind
                    ? this  // 此時的 this 就是 new 出的 obj
                    : oThis || this, // 若是傳遞的 oThis 無效，就將 fBind 的調用者做爲this
                // 將經過bind傳遞的參數和調用時傳遞的參數進行合併，並做爲最終的參數傳遞
                args.concat(Array.prototype.slice.call(arguments))
            );
        };

        // 將目標函數的原型對象拷貝到新函數中，由於目標函數有可能被看成構造函數使用
        fBind.prototype = this.prototype;

        // 返回fBind的引用，由外部按需調用
        return fBind;
    };
}        　　

一旦函數經過bind傳遞了有效的this對象，則該函數在運行期的this將指向這個對象，即便經過call或apply來試圖改變this的指向也是徒勞的。

var obj1 = {
    name: 'Tom'
}
var obj2 = {
    name: 'Joy'  
}
setTimeout(function() {
    console.log(this.name); 
}.bind(obj1).bind(obj2), 0);

// Tom

當對一個函數調用屢次bind的時候，最終起做用的是第一個bind，這是由於每一個bind 都會返回一個閉包 fBind，fBind 裏保存了執行目標函數的 scope 和 arguments。執行屢次 bind ，目標函數會被多個閉包包裝，而後從外到裏去執行，當執行真正目標函數的時候，apply 函數中的 scope 和  arguments 讀取當前閉包裏的變量。 　　

 

// 實現數組的去重功能
Array.prototype.unique = function(fn) {
        var rst = [];
        var tmp = {};
        this.forEach(function(val) {
            // 使用call來改變fn的this指向，這裏傳window
            var key = 'uniq' + (typeof fn === 'function' ? fn.call(window, val) : val);
            if (!tmp.hasOwnProperty(key)) {
                rst.push(val);
                tmp[key] = null;
            }
        }, this);

        return rst;
}

// 對象數組去重
var arr = [
    { id: 2 }, { id: 4 }, { id: 3 }, { id: 3 }, { id: 4 }, { id: 6 }
]
arr.unique(function(v) {
     console.log(this) // 使用bind傳遞了Array,則this必定是Array,而不會是window
     return v.id
}.bind(Array));

四、應用場景一：繼承

你們知道，JavaScript中沒有諸如Java、C# 等高級語言中的extend 關鍵字，所以JS 中沒有繼承的概念，若是必定要繼承的話，call 和 apply 能夠實現這個功能：

function Animal(name,weight){
   this.name = name;
   this.weight = weight;
}

function Cat(){
    Animal.call(this,'cat','50');
  //Animal.apply(this,['cat','50']);

   this.say = function(){
      console.log("I am " + this.name+",my weight is " + this.weight);
   }
}

var cat = new Cat();
cat.say();//I am cat,my weight is 50

當經過new 運算符產生了cat 時，Cat中的 this 就指向了cat對象(關於new運算符的講解，請參考JS構造函數和new運算符，而繼承的關鍵是在於Cat中執行了Animal.call(this,'cat','50') 這句話，在call中將this做爲thisArgs參數傳遞，因而Animal 方法中的 this 就指向了Cat中的 this，而 cat 中的 this 指向的是 cat 對象，因此Animal 中的 this 指向的就是 cat 對象，在 Animal 中定義了name 和 weight 屬性，就至關於在 cat 中定義了這些屬性，所以 cat 對象便擁有了Animal 中定義的屬性，從而達到了繼承的目的。

五、應用場景二：移花接木

在講下面的內容以前，咱們首先來認識一下JavaScript 中的一個非標準專業術語：ArrayLike (類數組/僞數組)

ArrayLike 對象即擁有數組的一部分行爲，在DOM 中早已表現出來，而jQuery 的崛起讓ArrayLike 在JavaScript 中大放異彩。ArrayLike 對象的精妙在於它和JS 原生的 Array 相似，可是它是自由構建的，它來自開發者對JavaScript 對象的擴展，也就是說：對於它的原型(prototype)咱們能夠自由定義，而不會污染到JS原生的Array。 

ArrayLike 對象在JS中被普遍使用，好比DOM 中的NodeList, 函數中的arguments 都是類數組對象，這些對象像數組同樣存儲着每個元素，但它沒有操做數組的方法，而咱們能夠經過call 將數組的某些方法`移接`到ArrayLike 對象，從而達到操做其元素的目的。好比咱們能夠這樣遍歷函數中的arguments:

function test(){
    // 檢測arguments是否爲Array的實例
    console.log(
            arguments instanceof Array, //false
            Array.isArray(arguments)  //false
    );
    // 判斷arguments是否有forEach方法
    console.log(arguments.forEach); //undefined

    // 將數組中的forEach應用到arguments上
    Array.prototype.forEach.call(arguments,function(item){
        console.log(item); // 1 2 3 4
    });

}
test(1,2,3,4);

除此以外，對於apply 而言，咱們上面提到了它獨有的一個特性，即apply 接收的是數組，在傳遞給調用函數的時候是以參數列表傳遞的。 這個特性讓apply 看起來比call 略勝一籌，好比有這樣一個場景：給定一個數組[1,3,4,7]，而後求數組中的最大元素，而咱們知道，數組中並無獲取最大值的方法，通常狀況下，你須要經過編寫代碼來實現。而咱們知道，Math 對象中有一個獲取最大值的方法，即Math.max()， max方法須要傳遞一個參數列表，而後返回這些參數中的最大值。而apply 不只能夠將Math 對象的max 方法應用到其餘對象上，還能夠將一個數組轉化爲參數列表傳遞給max,看代碼就能一目瞭然：

var arr = [2,3,1,5,4];

Math.max.apply(null,arr); // 5

以上即是 call 和 apply 比較經典的幾個應用場景，熟練掌握這些技巧，並把這些特性應用到你的實際項目中，會使你的代碼看起來更加回味無窮！

 

原創發佈 @一像素  博客園 2016.01