基於JavaScript實作繼承機制之建構函式方法物件冒充的使用詳解_基礎知識

繼承的方式

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

物件冒充

物件冒充實作繼承的核心其實依賴在函數環境中使用 this 關鍵字。其原理如下：建構函式使用 this 關鍵字給所有屬性和方法賦值（即採用類別聲明的建構函式方式）。因為建構函數只是一個函數，所以可讓 ClassA 建構函數成為 ClassB 的方法，然後呼叫它。 ClassB 就會收到 ClassA 的建構函式中定義的性質和方法。例如，用下面的方式定義ClassA 和ClassB：

複製程式碼 程式碼如下:

程式碼如下:


function🎜>function ClassA(sColor) {
    this.color = sColor;    this.sayColor = function () {

        alert(this.color);
        alert(this.color);
   

function ClassB(sColor) {
}

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

程式碼如下:



程式碼如下:

function Class7Class (sColor) {    this.newMethod = ClassA;

    this.newMethod(sColor);
    delete this.newMethod;

}    delete this.newMethod;} 所有新屬性和新方法都必須在刪除了新方法的程式碼行後定義。否則，可能會覆蓋超類的相關屬性和方法：

複製代碼

代碼如下:

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

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

       alert(this.name);       alert(證明前面的程式碼有效，可以運行下面的範例：

複製程式碼

程式碼如下:


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();

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

    delete this.newMethod;
}

這裡有一個有弊和ClassY 具有同名的屬性或方法，ClassY 具有高優先權。因為它從後面的類別繼承。除這點小問題之外，用物件冒充實現多重繼承機制輕而易舉。 由於這種繼承方法的流行，ECMAScript 的第三版為 Function 物件加入了兩個方法，即 call() 和 apply()。後來很多衍生出來的實作繼承的方法其實也是基於call() 和 apply()來實現的。