Mehrere Möglichkeiten zur Implementierung der Vererbung in JavaScript

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!

Das könnte Sie auch interessieren:
  • JavaScript-Vererbung in einem Artikel verstehen
  • Zusammenfassung von 6 gängigen Vererbungsmethoden in js
  • 6 Vererbungsmethoden von JS Advanced ES6
  • Sechs Vererbungsmethoden in JS und ihre Vor- und Nachteile
  • Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile
  • Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung
  • 6 JavaScript-Vererbungsmethoden und ihre Vor- und Nachteile (Zusammenfassung)
  • Beispiele für mehrere gängige Möglichkeiten zur Implementierung der Vererbung in JS
  • Mehrere Vererbungsmethoden in JavaScript teilen

<<:  Detaillierte Erklärung der regulären Ausdrücke von Nginx

>>:  Lösung zum Vergessen des MySQL-Root-Passworts in MACOS

Artikel empfehlen

Die neueste Sammlung von 18 Webdesign-Arbeiten im grünen Stil

Toy Story 3 Online-Marketing-Website Zen Mobile E...

So verarbeiten Sie lokal dynamisch geladene Bilder in Vue

Finden Sie das Problem Heute bin ich auf ein Prob...

JS-Implementierung des Karussell-Karussell-Falls

In diesem Artikelbeispiel wird der spezifische JS...

Eine kurze Diskussion über die Berechnungsmethode von key_len in MySQL erklären

Mit dem MySQL-Befehl „explain“ können Sie die Lei...

Vue-Element el-transfer fügt Drag-Funktion hinzu

Das Core Asset Management Project erfordert, dass...

So erstellen Sie manuell ein neues Image mit Docker

In diesem Artikel wird die Methode zum manuellen ...

MySQL-Sortierung mittels Index-Scan

Inhaltsverzeichnis Installieren Sie Sakila Index-...

Analyse des Problems der Hyper-V-Installation unter CentOS 8

CentOS 8 ist schon seit längerem auf dem Markt. A...

So verwenden Sie Typescript zum Kapseln von lokalem Speicher

Inhaltsverzeichnis Vorwort Szenarien für die Verw...

Zusammenfassung der sieben MySQL JOIN-Typen

Bevor wir beginnen, erstellen wir zwei Tabellen, ...

Detaillierte Erklärung zu JavaScript Anti-Shake und Throttling

Inhaltsverzeichnis Entprellen Gaspedal Zusammenfa...