首頁 > web前端 > js教程 > 基於JavaScript實作繼承機制之建構函數 原型鏈混合方式的使用詳解_javascript技巧

基於JavaScript實作繼承機制之建構函數 原型鏈混合方式的使用詳解_javascript技巧

WBOY
發布: 2016-05-16 17:34:37
原創
1074 人瀏覽過

建構子、原型實作繼承的缺陷

首先來分析建構子和原型鏈兩種實作繼承方式的缺陷:

建構函式(物件冒充)的主要問題是必須使用建構函式方式,且無法繼承透過原型定義的方法,這不是最好的選擇。不過如果使用原型鏈,就無法使用帶有參數的建構函數了。開發者如何選擇?答案很簡單,兩者都用。

建構子 原型混合方式

這種繼承方式使用建構函式定義類,並非使用任何原型。創建類別的最好方式是用建構函數定義屬性,用原型定義方法。這種方式同樣適用於繼承機制,用物件冒充繼承建構函式的屬性,用原型鏈繼承 prototype 物件的方法。用這兩種方式重寫前面的例子,程式碼如下:

複製程式碼 程式碼如下:

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

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

function ClassB(sColor, sName) {
    ClassA.call(this, sColor);
    this.name = sName;
}

ClassB.prototype = new ClassA();

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


在此例子中,繼承機制由兩行突出顯示的藍色代碼實現。在第一行反白的程式碼中,在 ClassB 建構函式中,用物件冒充繼承 ClassA 類別的 sColor 屬性。在第二行反白的程式碼中,用原型鏈繼承 ClassA 類別的方法。由於這種混合方式使用了原型鏈,所以 instanceof 運算子仍能正確運作。

下面的範例測試了這段程式碼:
複製程式碼


程式碼如下:


var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();    //輸出"blue"
objB.sayColor();    //輸出"red"objB.sayName();    //輸出"John"
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板