下面小編就為大家?guī)硪黄狫S 面向?qū)ο笾^承---多種組合繼承詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
這一次要講 組合、原型式、寄生式、寄生組合式繼承方式。
1. 組合繼承：又叫偽經(jīng)典繼承，是指將原型鏈和借用構(gòu)造函數(shù)技術(shù)組合在一塊的一種繼承方式。
下面來看一個(gè)例子：
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
組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，融合它們的優(yōu)點(diǎn)。
2. 原型式繼承
可以在不必預(yù)先定義構(gòu)造函數(shù)的情況下實(shí)現(xiàn)繼承，其本質(zhì)是執(zhí)行對(duì)給定對(duì)象的淺復(fù)制。而復(fù)制得到的副本還可以得到進(jìn)一步的改造。
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. 寄生式繼承
與原型式繼承非常相似，也是基于某個(gè)對(duì)象或某些信息創(chuàng)建一個(gè)對(duì)象，然后增強(qiáng)對(duì)象，最后返回對(duì)象。為了解決組合繼承模式由于多次調(diào)用超類型構(gòu)造函數(shù)而導(dǎo)致的低效率問題，可以將這個(gè)模式與組合繼承一起使用。
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. 寄生組合式繼承
集寄生式繼承和組合繼承的優(yōu)點(diǎn)與一身，是實(shí)現(xiàn)基本類型繼承的最有效方式。
//繼承原型
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
這段例子的高效率體現(xiàn)在它只調(diào)用了一次SuperType構(gòu)造函數(shù)，并且因此避免了在SubType.prototype上面創(chuàng)建不必要的多余的屬性。與此同時(shí)，原型鏈還能保持不變。因此，還能正常使用instanceof 和 isPrototypeOf()。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。
以上這篇JS 面向?qū)ο笾^承---多種組合繼承詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考