詳解 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 框架底層的話會看到好多地方都有大量用到。