首頁 > web前端 > js教程 > 主體

JS的組合繼承是什麼? js組合繼承的介紹

不言
發布: 2018-10-23 15:46:21
轉載
2944 人瀏覽過

這篇文章帶給大家的內容是關於JS的組合繼承是什麼? js組合繼承的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

組合繼承(Combination Inheritance)

#組合繼承(Combination Inheritance), 有時候也叫做偽經典繼承,指的是:將原型鍊和借用構造函數的技術組合到一塊,從而發揮兩者之長的一種繼承模式。

實作想法: 使用原型鏈實作原型方法和方法的繼承,而藉由借用建構函式來實作實例屬性的繼承。

這樣,既透過在原型上定義方法實現了函數復用,又能夠保證每個實例物件都有它自己的屬性。

function SuperType(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
}

function SubType(name, age) {
    
    //继承属性
    SuperType.call(this, name);

    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType();
SubType.prototype.sayAge = function(){
    console.log(this.age);
}

var instance1 = new SubType("Shaw", 18);
instance1.colors.push("black");
console.log(instance1.colors); //["red","green","blue","black"]
instance1.sayName(); // "Shaw"
instance1.sayAge(); // 18

var instance2 = new SubType("Roc", 19);
console.log(instance2.colors); // ["red", "green", "blue"]
instance2.sayName(); // "Roc"
instance2.sayAge(); // 19
登入後複製

以上程式碼,SuperType建構子定義了兩個屬性:name和colors。

在SuperType的原型上定義了一個sayName()方法。

SubType建構子在呼叫SuperType建構子時傳入了name參數,緊接著又定義了它自己的屬性age。

然後,將SuperType的實例物件賦值給SubType的原型,然後在該新原型上定義了sayAge()方法、

這樣一來,就可以讓兩個不同的SubType實例物件既分別擁有自己的屬性-包括colors屬性,又可以使用相同的方法了。

組合避免了原型鍊和借用建構子的缺陷,融合了他們的優點。成為JavaScript中最常用的繼承模式。而且, 操作符 instanceof 和 isPrototypeOf()方法也能夠用於識別基於組合繼承創建的物件。

以上是JS的組合繼承是什麼? js組合繼承的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!