JS物件導向程式設計（四）：繼承

justcool發表於2018-11-25
JS物件程式設計繼承

一、原型鏈繼承

  1.  原型鏈繼承：利用原型讓一個引用型別繼承另一個引用型別的屬性和方法
//父類
function SuperType(){ 
    this.SuperProperty = "SuperType property"; 
} 
//子類
function SubType(){ 
    this.subProperty = "SubType property";
} 

//子類SubType繼承了父類SuperType
SubType.prototype = new SuperType(); 

var instance = new SubType(); 
console.log(instance.SuperProperty) // 繼承父類的SuperProperty屬性
複製程式碼

 通過建立 SuperType 的例項，並將該例項賦給SubType.prototype 來實現繼承

  1. 所有引用型別預設都繼承了 Object，而這個繼承也是通過原型鏈實現的，SubType 繼承了 SuperType，而 SuperType 繼承了 Object。
console.log(instance instanceof Object); //true 
console.log(instance instanceof SuperType); //true 
console.log(instance instanceof SubType); //true 
複製程式碼

缺點：

  1. 在通過原型來實現繼承時，原型實際上會變成另一個型別的例項。於是，原先的例項屬性也就順理成章地變成了現在的原型屬性了。例如：
var instanceSup=new SuperType()
instanceSup.hasOwnProperty("SuperProperty")         //true

var instance=new SubType()
instance.hasOwnProperty("SuperProperty")    //false
複製程式碼

 SuperProperty是SuperType()的例項屬性，是SubType()的原型屬性

  1. 不能在不影響所有物件例項的情況下，給父型別的建構函式傳遞引數

二、建構函式繼承

  1. 建構函式繼承：通過使用 call()或 apply()方法在子型別建構函式的內部呼叫父型別建構函式
function SuperType(){ 
    this.SuperProperty = "SuperType property"; 
} 
function SubType(){ 
 //繼承了 SuperType 
 SuperType.call(this); 
} 
var instance = new SubType(); 
console.log(instance.SuperProperty) // "SuperType property"
複製程式碼
  1. SuperProperty是SuperType()的例項屬性，也是SubType()例項屬性
var instanceSup=new SuperType()
instanceSup.hasOwnProperty("SuperProperty")         //true

var instance=new SubType()
instance.hasOwnProperty("SuperProperty")    //false
複製程式碼
  1. 傳遞引數相對於原型鏈而言，借用建構函式有一個很大的優勢，即可以在子型別建構函式中向父型別構造函 數傳遞引數。例如：
function SuperType(name){ 
    this.name = name; 
} 
function SubType(){ 
    //繼承了 SuperType，同時還傳遞了引數
    SuperType.call(this, "lilei"); 
    //例項屬性
    this.age = 26; 
} 
var instance = new SubType(); 
console.log(instance.name); //"lilei"; 
console.log(instance.age); //26 
複製程式碼

缺點：無法繼承原型鏈上的屬性和方法

三、組合繼承

使用原型鏈實現對原型屬性和方法的繼承，而通過借用建構函式來實現對例項屬性和方法的繼承

function SuperType(name){ 
    this.name = name;
}
SuperType.prototype.country="China";

function SubType(name){
    //繼承屬性 
    SuperType.call(this,name);
}
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType;

var instance1 = new SuperType("lilei", 26);
var instance2 = new SubType("xiaoming", 22);
console.log(instance1.name)     // lilei
console.log(instance1.country)  // China
console.log(instance2.name)     // xiaoming
console.log(instance2.country)  // China
複製程式碼

優點：

  1. 可以繼承例項屬性/方法，也可以繼承原型屬性/方法
  2. 可傳參
  3. 函式可複用

缺點：

  子類原型上有父類的例項屬性，子類例項遮蔽了子類原型上的屬性；

四、原型式繼承

  1. 藉助原型可以基於已有的物件建立新物件，同時還不必因此建立自定義類；例如：
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

function SuperType(){ 
    this.name = "lilei";
}
var superType = new SuperType();
var subType = object(superType);
console.log(subType.name) // "lilei"

複製程式碼

把SuperType例項化的物件作為引數傳給object函式，函式就會返回一個新物件。這個新物件將superType作為原型。

  1. ECMAScript 5 通過新增 Object.create()方法規範化了原型式繼承。這個方法接收兩個引數:第一個作為新物件原型的物件，另一個作為新物件定義額外屬性的物件(可選) 。例如：
function SuperType(){ 
    this.name = "lilei";
}
var superType = new SuperType();

var subType = Object.create(superType,{
    age: {
        value: "12"
    }
});

console.log(superType.name)     // "lilei"
console.log(subType.name)       // "lilei"
複製程式碼

  額外屬性都會覆蓋原型物件上的同名屬性

function SuperType(){ 
    this.name = "lilei";
}
var superType = new SuperType();

var subType = Object.create(superType,{
    name: {
        value: "haimeimei"
    }
});

console.log(superType.name)     // "lilei"
console.log(subType.name)       // "haimeimei"
複製程式碼

優點：
 直接將父類物件生成新的物件傳遞給子類

缺點：
 引用型別值的屬性始終都會共享相應的值，和使用原型模式一樣

五、寄生式繼承

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function createObject(o){
    var clone=object(o); 
    clone.sayHello = function(){
        console.log("hello");
    };
    return clone;
}
function SuperType(){ 
    this.name = "lilei";
}
var superType = new SuperType();

var subType = createObject(superType);
subType.sayHello(); //"hello"
複製程式碼

優點：不需要建立自定義型別
缺點：無法實現函式的複用

六、寄生組合式繼承

組合繼承的缺點是會呼叫兩次父型別建構函式，子類原型上有父類的例項屬性。因此我們只要給子類原型賦父類原型的屬性。

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
複製程式碼

函式內部：

  1. 將父類原型地址賦值給變數prototype。
  2. 重寫原型會失去的預設的 constructor 屬性，所以新增一個constructor屬性。
  3. 把prototype賦值給子型別的原型。

舉個栗子：

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function SuperType(name){ 
    this.name = name;
}
SuperType.prototype.country="China";

function SubType(name){
    SuperType.call(this,name);
}

inheritPrototype(SubType, SuperType);

SubType.prototype.country="America";

var superType = new SuperType("lilei");
var subType = new SubType("tom");

console.log(superType.name)     //"lilei"
console.log(superType.country)  //"China"
console.log(subType.name)       //"tom"
console.log(subType.country)    // "America"
複製程式碼

優點：解決了子類原型上有父類的例項屬性問題，是引用型別最理想的繼承正規化
缺點：過程比較複雜

 物件導向程式設計到此就完結啦，希望對大家有幫助！

文章參考：

《JavaScript 高階程式設計》中文譯本 第三版

相關文章