理解js对象继承的N种模式
本文分享了js对象继承的N种模式，供大家参考。
一、原型链继承
functionPerson(){};
Person.prototype={
constructor:Person,
name:"Oliver"
};
functionPeople(){};
People.prototype=newPerson();
People.prototype.constructor=People;
People.prototype.sayName=function(){
returnthis.name;
};
varins=newPeople();
console.log(ins.sayName());
二、借用构造函数（伪造对象，经典继承）
1、无参数
functionSuperType(){
this.color=["red","yellow","white"];
}
functionSubType(){
SuperType.call(this);
}
varinstance1=newSubType();
varinstance2=newSubType();
instance1.color.pop();
console.log(instance1.color);//["red","yellow"]
console.log(instance2.color);//["red","yellow","white"]
2、有参数
functionSuperType(name){
this.name=name;
this.number=[21,32,14,1];
}
functionSubType(name,age){
SuperType.call(this,name);
this.age=age;
}
varinstance1=newSubType("Oliver",18);
varinstance2=newSubType("Troy",24);
instance2.number.pop();
console.log(instance1.name+instance1.age+instance1.number);//Oliver1821,32,14,1
console.log(instance2.name+instance2.age+instance2.number);//Troy2421,32,14
三、组合继承（伪经典继承）
1、无参数
functionSuperType(){
this.color=["red","yellow","white"];
}
SuperType.prototype.sayColor=function(){
returnthis.color;
};
functionSubType(){
SuperType.call(this);
this.number=321;
}
SubType.prototype=newSuperType();
SubType.prototype.constructor=SubType;
SubType.prototype.sayNumber=function(){
returnthis.number;
};
varinstance1=newSubType();
varinstance2=newSubType();
instance2.color.pop();
console.log(instance1.color+instance1.number);//red,yellow,white321
console.log(instance2.color+instance2.number);//red,yellow321
2、有参数
functionSuperType(name){
this.name=name;
this.number=[32,1342,11,1];
}
SuperType.prototype.sayName=function(){
returnthis.name;
};
functionSubType(name,age){
SuperType.call(this,name);
this.age=age;
}
SubType.prototype=newSuperType();
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
returnthis.age;
};
varinstance1=newSubType("Oliver",18);
varinstance2=newSubType("Troy",24);
instance2.number.pop();
console.log(instance1.sayName()+instance1.sayAge()+instance1.number);//Oliver1832,1342,11,1
console.log(instance2.sayName()+instance2.sayAge()+instance2.number);//Troy2432,1342,11
三、寄生组合式继承（引用类型最理想的范式）
functioninheritPrototype(subType,superType){
varprototype=Object(superType.prototype);
prototype.constructor=subType;
subType.prototype=prototype;
}
functionSuperType(name){
this.name=name;
this.number=[321,321,43];
}
SuperType.prototype.sayName=function(){
returnthis.name;
};
functionSubType(name,age){
SuperType.call(this,name);
this.age=age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge=function(){
returnthis.age;
};
varinstance1=newSubType("Oliver",18);
varinstance2=newSubType("Troy",24);
instance2.number.pop();
console.log(instance1.sayName()+instance1.sayAge()+instance1.number);//Oliver18321,321,43
console.log(instance2.sayName()+instance2.sayAge()+instance2.number);//Troy24321,321
或者可以把inheritPrototype函数写成下面这样：
functioninheritPrototype(SubType,SuperType){
SubType.prototype=newSuperType();
SubType.prototype.constructor=SubType;
}
四、原型式继承（用于共享引用类型的值，与寄生式类似）
1、传统版（先定义object()函数，再继承）
functionobject(o){
functionF(){};
F.prototype=o;
returnnewF();
}
varSuperType={
name:"Oliver",
number:[321,321,4532,1]
};
varSubType1=object(SuperType);
varSubType2=object(SuperType);
SubType1.name="Troy";
SubType1.number.pop();
SubType2.name="Alice";
SubType2.number.pop();
console.log(SubType1.name+SubType2.name+SubType1.number+SubType2.number+SuperType.name+SuperType.number);//TroyAlice321,321321,321Oliver321,321
ECMAScript5版（直接用Object.create()，再继承）
varSuperType={
name:"Oliver",
number:[321,321,4532,1]
};
varSubType1=Object.create(SuperType);//省略了定义object()函数
varSubType2=Object.create(SuperType);
SubType1.name="Troy";
SubType1.number.pop();
SubType2.name="Alice";
SubType2.number.pop();
console.log(SubType1.name+SubType2.name+SubType1.number+SubType2.number+SuperType.name+SuperType.number);//TroyAlice321,321321,321Oliver321,321
ECMAScript5简写版（定义Object.create()的第二个参数，再继承）
varSuperType={
name:"Oliver",
number:[321,321,4532,1]
};
varSubType1=Object.create(SuperType,{
name:{
value:"Troy"
}
});
varSubType2=Object.create(SuperType,{
name:{
value:"Alice"
}
});
SubType1.number.pop();
SubType2.number.pop();
console.log(SubType1.name+SubType2.name+SubType1.number+SubType2.number+SuperType.name+SuperType.number);//TroyAlice321,321321,321Oliver321,321
寄生式继承（用于共享引用类型的值，与原型式类似）
functioncreateAnother(original){
varclone=Object(original);
clone.sayHi=function(){
return"Hi";
};
returnclone;
}
varperson={
name:"Oliver",
number:[13,21,31,1]
};
varanotherPerson=createAnother(person);
anotherPerson.number.pop();
console.log(anotherPerson.sayHi()+anotherPerson.number);//Hi13,21,31
console.log(person.number);//13,21,31
以上就是本文的全部内容，希望对大家的学习有所帮助。