Mehrere Möglichkeiten zur Implementierung der Vererbung in JavaScript

Die gängigen Methoden zur Implementierung der Vererbung in Nicht-ES6-Code können wie folgt unterteilt werden:
Strukturelle Vererbung, Prototypkettenvererbung, kombinierte Vererbung aus struktureller Vererbung + Prototypkettenvererbung und aus kombinierter Vererbung abgeleitete Vererbungsmethoden.

Strukturelle Vererbung (implementiert mit Aufruf)

erreichen

Funktion Super(Alter){
 dieses.Alter = Alter;
 dies.sagen = function(){
 console.log(dieses.Alter)
 }
}
Funktion Kind(Name,Alter){
 Super.call(dieses,Alter)
 dieser.name = Name;
}
var Kind = neues Kind("min",23)
console.log(untergeordnete Instanz von Super); // false
console.log(untergeordnete Instanz von Child); // wahr

Vorteil

(1) Mehrfachvererbung kann erreicht werden (aufrufen mehrerer übergeordneter Klassenobjekte)
(2) Im Konstruktor können Parameter an das übergeordnete Objekt übergeben werden.

Mangel

(1) Sie können nur die Eigenschaften und Methoden der übergeordneten Klasseninstanz erben, nicht die Eigenschaften und Methoden des Prototyps
(2) Die Instanz ist keine Instanz der übergeordneten Klasse, sondern eine Instanz der untergeordneten Klasse

Vererbung der Prototypkette (implementiert mit Hilfe der Prototypkette)

erreichen

Funktion Super(){
 dies.getName = Funktion(){
 console.log(dieser.Name)
 }
}
Funktion Kind(Name){
	dieser.name = Name;
}
Child.prototype = new Super(); // Sie können hier den Konstruktionsparameter übergeben Child.prototype.constructor = Child;
var Kind = neues Kind("min");
console.log(untergeordnete Instanz von Super); // true
console.log(untergeordnete Instanz von Child); // wahr
console.log(Kind.Konstruktor); // Kind

Vorteil
(1) Die Eigenschaften und Methoden des Prototyps der übergeordneten Klasse sind für untergeordnete Klassen zugänglich
(2) Die Instanz ist eine Instanz der Unterklasse und zugleich eine Instanz der Elternklasse

Mangel
(1) Mehrfachvererbung kann nicht erreicht werden. (2) Beim Erstellen einer Unterklasseninstanz ist es nicht möglich, Parameter an den Konstruktor der übergeordneten Klasse zu übergeben.

Kombinierte Vererbung (Konstruktionsvererbung + Prototypkettenvererbung)

erreichen

Funktion Super(Alter){
 dieses.Alter = Alter;
 dies.getAge = Funktion(){
 Konsole.log(dieses.Alter);
 }
}
Funktion Kind(Name,Alter){
 Super.call(dieses,Alter)
 dieser.name = Name;
}
Child.prototype = neues Super(1); 
Kind.Prototyp.Konstruktor = Kind;
var Kind = neues Kind("min",23);
console.log(untergeordnete Instanz von Super); // true
console.log(untergeordnete Instanz von Child); // wahr
console.log(Kind.Konstruktor); // Kind

Vorteil
(1) Kombination der Vorteile von Konstruktion + Prototypkettenvererbung

Mangel
(1) Child.prototype = new Super(); wird erneut aufgerufen, was zu einigen unnötigen Eigenschaften im Prototypobjekt führt, wie z. B. der Eigenschaft „age“ im obigen Beispiel.

Parasitäre kompositorische Vererbung

erreichen

Funktion Super(Alter){
 dieses.Alter = Alter;
 dies.getAge = Funktion(){
 console.log(dieses.Alter)
 }
}
Funktion Kind(Name,Alter){
 Super.call(dieses,Alter)
 dieser.name = Name;
}
(Funktion(){
 Funktion Kopieren(){}
 Kopie.Prototyp = Super.Prototyp;
 Child.prototype = neue Kopie();
})()
Kind.Prototyp.Konstruktor = Kind;
var Kind = neues Kind("min",23);

Hinweis: Warum nicht Child.prototype = Super.prototype direkt verwenden?
Antwort: Child.prototype.constructor = Child; Der Schlüsselcode, der oben Super.prototype schreibt, wird sich ebenfalls ändern (Referenztyp, der auf dieselbe Adresse zeigt).

Vorteil
(1) Dies sollte die perfekteste Lösung zur Implementierung von Vererbung sein. Das Schlüsselwort extends es6 implementiert Vererbung auch auf diese Weise, nachdem der Code von babel konvertiert wurde.

Extra: Mit (Object.create)

erreichen

Funktion Super(Alter){
 dieses.Alter = Alter;
 dies.getAge = Funktion(){
 console.log(dieses.Alter)
 }
}
Funktion Kind(Name,Alter){
 Super.call(dieses,Alter)
 dieser.name = Name;
}
Child.prototype = Objekt.erstellen(Super.prototype,{
 Konstruktor: { // Konstruktor repariert Wert: Child
 }
})
var Kind = neues Kind("min",23);
console.log(untergeordnete Instanz von Super); // true
console.log(untergeordnete Instanz von Child); // wahr
console.log(Kind.Konstruktor); // Kind

Oben sind die Details mehrerer Möglichkeiten zur Implementierung von Vererbung in JavaScript aufgeführt. Weitere Informationen zur Implementierung von Vererbung in JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!