JS面向?qū)ο蟮某绦蛟O(shè)計之繼承的實現(xiàn)-組合繼承

antz 發(fā)布于2019-08-23 12:29 / 595人閱讀

摘要：實現(xiàn)思路使用原型鏈實現(xiàn)對原型方法和方法的繼承，而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。繼承屬性繼承方法以上代碼，構(gòu)造函數(shù)定義了兩個屬性和。

JS面向?qū)ο蟮某绦蛟O(shè)計之繼承的實現(xiàn)-組合繼承

前言：最近在細讀Javascript高級程序設(shè)計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaScript高級程序設(shè)計第三版》。

組合繼承（Combination Inheritance）

組合繼承（Combination Inheritance），有時候也叫做偽經(jīng)典繼承，指的是：將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一塊，從而發(fā)揮兩者之長的一種繼承模式。

實現(xiàn)思路: 使用原型鏈實現(xiàn)對原型方法和方法的繼承，而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。

這樣，既通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用，又能夠保證每個實例對象都有它自己的屬性。

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構(gòu)造函數(shù)定義了兩個屬性：name和colors。

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

SubType構(gòu)造函數(shù)在調(diào)用SuperType構(gòu)造函數(shù)時傳入了name參數(shù)，緊接著又定義了它自己的屬性age。

然后，將SuperType的實例對象賦值給SubType的原型，然后又在該新原型上定義了sayAge()方法、

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

組合避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，融合了他們的優(yōu)點。成為JavaScript中最常用的繼承模式。而且, 操作符 instanceof 和 isPrototypeOf()方法也能夠用于識別基于組合繼承創(chuàng)建的對象。