移花接木—— 再談javascript中的 call 與 apply

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

 

call(thisArgs [,args...])

---

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

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

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

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

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

 obj = {name:'onepixel'a.call(); a.call(undefined);a.call(1); a.call(''); a.call(); a.call(b);a.call(obj);

這是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的這個特性很重要，咱們會在下面的應用場景中提到這個特性。

 

應用場景一：繼承

---

你們知道，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運算符的講解，請參考：http://www.cnblogs.com/onepixel/p/5043523.html)，而繼承的關鍵是在於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比較經典的幾個應用場景，熟練掌握這些技巧，並把這些特性應用到你的實際項目中，會使你的代碼看起來更加回味無窮！