JS 面向對象之繼承---多種組合繼承詳解

這一次要講組合、原型式、寄生式、寄生組合式繼承方式。

1. 組合繼承：又叫偽經典繼承，是指將原型鍊和借用構造函數技術組合在一塊的一種繼承方式。

下面來看一個例子：

 function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.name); } function SubType(name, age) { SuperType.call(this, name); this.age = age; } //繼承方法SubType.prototype = new SuperType(); SubType.prototype.sayAge = function() { alert(this.age); } var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //red,blue,green,black instance1.sayName(); //Nicholas instance1.sayAge(); //29 var instance2 = new SubType("Greg", 27); alert(instance2.colors); //red,blue,green instance2.sayName(); //Greg instance2.sayAge(); //27

組合繼承避免了原型鍊和借用構造函數的缺陷，融合它們的優點。

2. 原型式繼承

可以在不必預先定義構造函數的情況下實現繼承，其本質是執行對給定對象的淺複製。而復制得到的副本還可以得到進一步的改造。

 function object(o) { function F(){}; F.prototype = o; return new F; } var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var antherPerson = object(person); antherPerson.name = "Greg"; antherPerson.friends.push("Rob"); var antherPerson = object(person); antherPerson.name = "Linda"; antherPerson.friends.push("Barbie"); alert(person.friends); //Shelby,Court,Van,Rob,Barbie

3. 寄生式繼承

與原型式繼承非常相似，也是基於某個對像或某些信息創建一個對象，然後增強對象，最後返回對象。為了解決組合繼承模式由於多次調用超類型構造函數而導致的低效率問題，可以將這個模式與組合繼承一起使用。

 function object(o) { function F(){}; F.prototype = o; return new F; } function createAnother(original) { var clone = object(original); clone.sayHi = function() { alert("Hi"); }; return clone; } var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi();

4. 寄生組合式繼承

集寄生式繼承和組合繼承的優點與一身，是實現基本類型繼承的最有效方式。

 //繼承原型function extend(subType, superType) { function F(){}; F.prototype = superType.prototype; var prototype = new F; prototype.constructor = subType; subType.prototype = prototype; } //超類方法function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { return this.name; } //子類方法function SubType(name, age) { SuperType.call(this, name); this.age = age; } //繼承超類的原型extend(SubType, SuperType); //子類方法SubType.prototype.sayAge = function() { return this.age; } var instance1 = new SubType("Shelby"); var instance2 = new SubType("Court", 28); instance1.colors.push('black'); alert(instance1.colors); //red,blue,green,black alert(instance2.colors); //red,blue,green alert(instance1 instanceof SubType); //true alert(instance1 instanceof SuperType); //true

這段例子的高效率體現在它只調用了一次SuperType構造函數，並且因此避免了在SubType.prototype上面創建不必要的多餘的屬性。與此同時，原型鏈還能保持不變。因此，還能正常使用instanceof 和isPrototypeOf()。開發人員普遍認為寄生組合式繼承是引用類型最理想的繼承範式。

以上這篇JS 面向對象之繼承---多種組合繼承詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。