JavaScript函數的apply方法與call方法

標籤：

首先，function是一個指向Function對象，函數名是一個指向函數的指標。那麼在函數體內，就會有一個範圍，即this關鍵字。

this關鍵字指的是函數啟動並執行範圍，舉個例子來說:

<script type="text/javascript">        function funcA() {            alert(this);            alert("Function A");        }</script>

上面這段代碼中的函數funcA定義在全域環境中，那麼函數體內的this即window對象。

下面該到call和apply的說明了。以call函數為例，call的第一個參數，就是改變函數的範圍，後面的參數為傳入函數的所需的參數，必須與原函數的參數一直，舉例說明：

<script type="text/javascript">        var testO = { name: "Lily" };        function funcA(a,b) {            console.info(this);            console.info("Function A");        }        function funcB(a, b) {            funcA.call(testO, a, b);        }        funcB(1,2);  //this變成了testO</script>

我們定義funcB函數的中，調用了funcA的call函數，這個時候我們改變了funcA中this的指向，原本指向window的，現在指向了call的第一個參數testO這個對象。而且調用call時，因為funcA函數有兩個參數，所以如果要想funcA傳遞參數，必須一一指出參數，即後面的兩個參數a和b，或者可以只穿第一個參數

即：funcA.call(testO)；或者只傳a，即：funcA.call(testO,a);call這種寫法

而apply與call的區別僅在於，apply的第二個參數可以是數組形式，而且不必一一指出參數，funcA.apply(testO,[a,b])

介紹完call與apply的基本用法，該說說他哥倆真正的用武之地了，擴充函數賴以啟動並執行範圍。

<script type="text/javascript">        window.color = "透明";        var testObj = { color: "紅色" };                function testFuc() {            console.info(this.color);        }        $(function () {            testFuc(); //彈出“透明”            testFuc(this); //彈出“undefined”            testFuc.call(this.parent); //彈出“透明”            testFuc.call(window); //彈出“透明”            testFuc.call(testObj); //彈出“紅色”        });</script>

上面這段代碼示範了call的作用。第一個函數調用，this指向了window，所以彈出了window的color屬性。

第二個函數可能有些朋友以為也會彈出透明，但是請先確定我們的函數運行在$(function(){});中，這個jQuery的函數，瞭解jQuery的朋友都很清楚，在$(function(){});中this的範圍指向的是document，然後我們調用testFunc，要彈出document的color，當然是未定義的。(我測試的時候彈出的是"透明...")

第三個函數將testFunc的this指向了document的親爹window，彈出window的color當然也是沒有問題的。

第四個函數就更加直白了，把window傳進去了

第五個函數，將testFunc的this指向了testObj，彈出了紅色。

講到這裡，用法大家應該都有所瞭解了，但是具體怎麼去理解怎麼去使用還是看自己的套路。

我是這麼理解的，可以把這種用法看成是C#或者java中的泛型方法。比如一個C#方法的定義

代碼如下:

public void Test<T>(T a, T b) { }

這樣我們就可以實現對方法的擴充，實現通用的目的。

以上都是本人自己的看法和觀點，有什麼不對之處還請大家指出來共同學習。

再舉個例子方便理解:

jquery call 方法和apply方法接觸:

call方法: 
文法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
定義：以另一個對象替換當前對象來調用方法。 
說明： 
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的物件內容從初始的上下文改變為由 thisObj 指定的新對象。 
如果沒有提供 thisObj 參數，那麼 Global 對象被用作 thisObj。 

apply方法： 
文法：apply([thisObj[,argArray]]) 
定義：用另一個對象替換當前對象來應用方法。 
說明： 
如果 argArray 不是一個有效數組或者不是 arguments 對象，那麼將導致一個 TypeError。 
如果沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用作 thisObj， 並且無法被傳遞任何參數。 

<script language="javascript"><!--       /**定義一個animal類*/      function Animal(){           this.name = "Animal";           this.showName = function(){               alert(this.name);           }       }       /**定義一個Cat類*/      function Cat(){           this.name = "Cat";       }             /**建立兩個類對象*/      var animal = new Animal();       var cat = new Cat();             //通過call或apply方法，將原本屬於Animal對象的showName()方法交給當前對象cat來使用了。         //本來showName()方法的調用者為animal,但是call函數讓該方法的調用者變成了cat,函數還是showName()函數,    //只是調用者改變了,於是在showName()函數內部this的指向變成了cat,而不是animal     animal.showName.call(cat,",");  //輸入結果為"Cat"     //animal.showName.apply(cat,[]); //輸入結果為"Cat"   </script>

以上代碼無論是採用animal.showName.call或是animal.showName.apply方法，啟動並執行結果都是輸出一個"Cat"的字串。說明showName方法的調用者被換成了cat對象，而不是最初定義它的animal了。這就是call和apply方法的妙用！

JavaScript函數的apply方法與call方法