基於JavaScript實現繼承機制之建構函式方法對象冒充的使用詳解

來源:互聯網
上載者:User

繼承的方式

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()來實現的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.