基于JavaScript實現繼承機制之構造函數方法對象冒充的使用詳解

2019-11-20 22:44:17

字體：大中小

來源：轉載

供稿：網友

繼承的方式

ECMAScript 實現繼承的方式不止一種。這是因為 JavaScript 中的繼承機制并不是明確規定的，而是通過模仿實現的。這意味著所有的繼承細節并非完全由解釋程序處理。作為開發者，你有權決定最適用的繼承方式。最原始的繼承實現方式就是對象冒充，下面著重介紹該方法。

對象冒充

對象冒充實現繼承的核心其實依賴于在函數環境中使用 this 關鍵字。其原理如下：構造函數使用 this 關鍵字給所有屬性和方法賦值（即采用類聲明的構造函數方式）。因為構造函數只是一個函數，所以可使 ClassA 構造函數成為 ClassB 的方法，然后調用它。ClassB 就會收到 ClassA 的構造函數中定義的屬性和方法。例如，用下面的方式定義 ClassA 和 ClassB：

復制代碼代碼如下:

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor) {
}

關鍵字 this 引用的是構造函數當前創建的對象。不過在這個方法中，this 指向的所屬的對象。這個原理是把 ClassA 作為常規函數來建立繼承機制，而不是作為構造函數。如下使用構造函數 ClassB 可以實現繼承機制：

復制代碼代碼如下:

function ClassB(sColor) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
}

在這段代碼中，為 ClassA 賦予了方法 newMethod（請記住，函數名只是指向它的指針）。然后調用該方法，傳遞給它的是 ClassB 構造函數的參數 sColor。最后一行代碼刪除了對 ClassA 的引用，這樣以后就不能再調用它。

所有新屬性和新方法都必須在刪除了新方法的代碼行后定義。否則，可能會覆蓋超類的相關屬性和方法：

復制代碼代碼如下:

function ClassB(sColor, sName) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

為證明前面的代碼有效，可以運行下面的例子：

復制代碼代碼如下:

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();    //輸出 "blue"
objB.sayColor();    //輸出 "red"
objB.sayName();        //輸出 "John"

對象冒充可以實現多重繼承

有趣的是，對象冒充可以支持多重繼承。例如，如果存在兩個類 ClassX 和 ClassY，ClassZ 想繼承這兩個類，可以使用下面的代碼：

復制代碼代碼如下:

function ClassZ() {
    this.newMethod = ClassX;
    this.newMethod();
    delete this.newMethod;

    this.newMethod = ClassY;
    this.newMethod();
    delete this.newMethod;
}

這里存在一個弊端，如果存在兩個類 ClassX 和 ClassY 具有同名的屬性或方法，ClassY 具有高優先級。因為它從后面的類繼承。除這點小問題之外，用對象冒充實現多重繼承機制輕而易舉。

由于這種繼承方法的流行，ECMAScript 的第三版為 Function 對象加入了兩個方法，即 call() 和 apply()。后來很多衍生出來的實現繼承的方法其實也是基于call() 和 apply()來實現的。

上一篇：你必須知道的JavaScript 中字符串連接的性能的一些問題

下一篇：基于JavaScript實現繼承機制之調用call()與apply()的方法詳解