詳解 JavaScript的 call() 和 apply()

Code_lover發表於2018-10-27
JavaScriptAPP

定義

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

相關文章