詳解 JavaScript的 call() 和 apply()

定義

ECMAScript規範爲所有函數都包含兩個方法(這兩個方法非繼承而來), call 和 apply 。這兩個函數都是在特定的作用域中調用函數,能改變函數的作用域，實際上是改變函數體內 this 的值 。

call 和 apply

語法	定義	說明
call(thisObj，Object)	調用一個對象的一個方法，以另一個對象替換當前對象。	call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象.如果沒有提供 thisObj 參數，那麼 Global 對象被用作 thisObj
apply(thisObj，[argArray])	應用某一對象的一個方法，用另一個對象替換當前對象。	如果 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將導致一個 TypeError。如果沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用作 thisObj， 並且無法被傳遞任何參數

用法

調用函數，傳遞參數

    //定義一個add 方法
    function add(x, y) {
        return x + y;
    }

    //用call 來調用 add 方法
    function myAddCall(x, y) {
        //調用 add 方法 的 call 方法
        return add.call(this, x, y);
    }

    //apply 來調用 add 方法
    function myAddApply(x, y) {
        //調用 add 方法 的 applly 方法
        return add.apply(this, [x, y]);
    }

    console.log(myAddCall(10, 20));    //輸出結果30
  
    console.log(myAddApply(20, 20));  //輸出結果40

我們看到通過方法本身的call 和 apply 執行了該函數。

改變函數作用域

    var name = '小白';

    var obj = {name:'小紅'};

    function sayName() {
        return this.name;
    }

    console.log(sayName.call(this));    //輸出小白

    console.log(sayName. call(obj));    //輸入小紅

我們改變了函數運行的作用域， 通過綁定不同的對象，函數內部 this 也不同。最終輸入結果纔會這樣。

高級用法，實現 js 繼承

    //父類 Person
    function Person() {
        this.sayName = function() {
            return this.name;
        }
    }

    //子類 Chinese
    function Chinese(name) {
        //藉助 call 實現繼承
        Person.call(this);
        this.name = name;

        this.ch = function() {
            alert('我是中國人');
        }
    }

    //子類 America
    function America(name) {
        //藉助 call 實現繼承
        Person.call(this);
        this.name = name;

        this.am = function() {
            alert('我是美國人');
        }
    }


    //測試
    var chinese = new Chinese('成龍');
    //調用 父類方法
    console.log(chinese.sayName());   //輸出 成龍

    var america = new America('America');
    //調用 父類方法
    console.log(america.sayName());   //輸出 America

區別

• 參數不同, apply 傳入的是一個參數數組，也就是將多個參數組合成一個參數數組， call 從第二個參數開始依次傳入.
• apply 可以直接將當前函數的arguments對象作爲apply的第二個參數傳入

結束語

call 和 apply 最大的好處:方便我們解耦，對象不需要和方法有任何的耦合性，能使我們寫出更好的面相對象程序。
大家如果看一些 js 框架底層的話會看到好多地方都有大量用到。