Dieser Artikel stellt Ihnen verschiedene Implementierungsmethoden der Vererbung in JavaScript vor. Ich hoffe, dass Sie nach dem Lesen dieses Artikels ein gewisses Verständnis der Vererbung in JavaScript haben!
Mehrere Implementierungsmethoden der Vererbung in JavaScript
Vererbung
Möchten implementiert werden Bei der Vererbung benötigen Sie zunächst eine übergeordnete Klasse (Konstruktor), um Eigenschaften und Methoden bereitzustellen.
function Father(name){
this.name=name //父类构造函数中的属性
}
Father.prototype.age='40' //父类原型中的属性Nach dem Login kopieren
1. Konstruktorvererbung ausleihen
var Son=function(){
Father.call(this,...arguments)
this.age=10
}
var son=new Son('小明')
console.log(son) //{name: "小明", age: 10}Nach dem Login kopieren
Zu diesem Zeitpunkt ruft die Son-Funktion einfach den übergeordneten Konstruktor im untergeordneten Konstruktor über die Aufrufmethode auf
Das heißt, es erbt nur die Eigenschaften des Konstruktors der übergeordneten Klasse, nicht jedoch die Eigenschaften des Prototyps der übergeordneten Klasse.
Sie können zu diesem Zeitpunkt die Methode „instanceof“ verwenden, um zu beurteilen
console.log(son instanceof Father) //false
Nach dem Login kopieren
2. Über die Prototypenkette erben
var Son=function(name){
this.sonName=name
}
Son.prototype=new Father()
var xiaoming=new Son('小明')
console.log(xiaoming) //{sonName:'小明'}
console.log(xiaoming.__proto__==Son.prototype) //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age) //40 通过原型链查找Nach dem Login kopieren
Son erbt das Namensattribut in der Vater-Konstruktor Neben dem Altersattribut im Prototyp erbt das Prototypobjekt des Sohns Xiao Ming das sonName-Attribut im Son-Konstruktor, das Namensattribut im Vater-Konstruktor und das Altersattribut im Prototyp , kann aber nur Werte an den Sohn übergeben, der Wert kann nicht an den Vater übergeben werden.
3. Kombinierte Vererbung (kombinierte Prototypkettenvererbung und geliehene Konstruktorvererbung)
var Son=function(){
Father.call(this,...arguments)
}
Son.prototype=new Father()
var son=new Son('小明')
console.log(son) //{name:'小明'}
console.log(son.age) //40Nach dem Login kopieren
4. Vererbung kopieren
Durch for...in zyklisch die aufzählbaren Eigenschaften und Methoden des übergeordneten Klassenobjekts und des Prototypobjekts dem Prototyp des Sohns zuweisen
function Son(name){
var father=new Father()
for(let i in father){
console.log(father[i])
Son.prototype[i]=father[i]
}
Son.prototype.name=name
}
var son=new Son('leo')
console.log(son)Nach dem Login kopieren
Diese Methode kann die übergeordnete Klasse nicht abrufen Nicht aufzählbare Methoden. Da sie die Attribute und Methoden der übergeordneten Klasse kopieren müssen, ist die Speichernutzung relativ hoch und die Effizienz gering.
5. Prototypische Vererbung
Für die Verwendung der prototypischen Vererbung ist es nicht erforderlich, eine Klasse zu definieren, den Parameter obj zu übergeben und ein Objekt zu generieren, das das obj-Objekt erbt. Ähnlich dem Kopieren eines Objekts und dem Umschließen mit einer Funktion. Es handelt sich jedoch nicht um eine Klassenvererbung, sondern um eine Prototypenbasis, der das Konzept der Klasse fehlt.
function ObjectCreate(obj){ //这个方法的原理就是Object.create()
function F(){}
F.prototype=obj
return new F()
}
var Son=new Father('son');
var son=ObjectCreate(Son)
var objson=Object.create(Son);
console.log(son.name) //son
console.log(objson.name) //son
console.log(son.__proto__==Son) //trueNach dem Login kopieren
6. Parasitäre Vererbung
Erstellen Sie eine Funktion, um den Vererbungsprozess zu kapseln, erweitern Sie dann das Objekt auf irgendeine Weise intern und geben Sie das Objekt schließlich zurück
function ObjectCreate(obj){
function F(){}
F.prototype=obj
return new F()
}
var Son=new Father();
function subObject(obj){
var sub=ObjectCreate(obj)
sub.name='son'
return sub
}
var son=subObject(Son)
console.log(son.name) //sonNach dem Login kopieren
7. Parasitäre kombinierte Vererbung
Durch die Kombination von parasitärer Vererbung und kombinierter Vererbung ist die Vererbungsmethode ohne zwei Oberklassenattribute perfekt realisiert, aber sie fühlt sich zu kompliziert an Nachlass.
function ObjectCreate(obj){
function F(){}
F.prototype=obj
return new F()
}
var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型
function Son(){
Father.call(this,...arguments)
}
Son.prototype=middle;
middle.construtor=Son; //修复实例
var son=new Son('son');
console.log(son) //{name:'son'}Nach dem Login kopieren
Dieser Artikel stammt aus der Rubrik
JS-Tutorial
, willkommen zum Lernen!
Das obige ist der detaillierte Inhalt vonMehrere Implementierungsmethoden der Vererbung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
