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方法的妙用！