Der Unterschied zwischen ES5- und ES6-Vererbung: Die ES5-Vererbung wird über den Prototyp- oder Konstruktormechanismus implementiert. Sie erstellt zunächst eine Unterklasse, instanziiert dann die übergeordnete Klasse und fügt sie der Unterklasse hinzu. ES6 erstellt zunächst die übergeordnete Klasse, instanziiert dann die Teilmenge, um auf die übergeordnete Klasse zuzugreifen, indem es die Super-Methode aufruft, und implementiert dann die Vererbung, indem es diese ändert.
Die Betriebsumgebung dieses Tutorials: Windows7-System, ECMAScript 5 und ECMAScript Version 6, Dell G3-Computer.
Der Unterschied zwischen der ES6-Vererbung und der ES5-Vererbung
-
Die ES5-Vererbung erstellt im Wesentlichen zuerst ein Instanzobjekt der Unterklasse und fügt diesem dann die Methode der übergeordneten Klasse hinzu (Parent.apply(this)
).
Der Vererbungsmechanismus von ES6 ist völlig anders. Im Wesentlichen wird das Instanzobjekt this der übergeordneten Klasse zuerst erstellt (daher muss zuerst die super()-Methode der übergeordneten Klasse aufgerufen werden) und dann mithilfe von geändert werden Konstruktor der Unterklasse.
Die Vererbung in ES5 wird über den Prototyp- oder Konstruktormechanismus implementiert.
ES6 definiert Klassen über das Schlüsselwort „class“, das Konstruktoren enthält, und die Vererbung zwischen Klassen wird über das Schlüsselwort „extends“ erreicht. Unterklassen müssen die Super-Methode in der Konstruktormethode aufrufen, andernfalls wird beim Erstellen einer neuen Instanz ein Fehler gemeldet. Weil die Unterklasse kein eigenes This-Objekt hat, sondern das This-Objekt der übergeordneten Klasse erbt und es dann verarbeitet. Wenn die Supermethode nicht aufgerufen wird, kann die Unterklasse dieses Objekt nicht abrufen.
Beachten Sie, dass sich das Schlüsselwort super auf die Instanz der übergeordneten Klasse bezieht, also auf das this-Objekt der übergeordneten Klasse.
Hinweis: Im Unterklassenkonstruktor kann das Schlüsselwort this nur nach dem Aufruf von super verwendet werden, andernfalls wird ein Fehler gemeldet.
1. Vererbung in es5:
function parent(a,b){
this a = a;
this b = b;
}
function child(c){
this c = c
};Nach dem Login kopieren
Vererbung des übergeordneten Elements durch Teilmengen:
parent.call(child,1,2)
Nach dem Login kopieren
Wenn wir uns die zugrunde liegende Aufrufmethode ansehen, können wir erkennen, dass der Vererbungsprozess über das Prototypattribut erfolgt.
child.prototype = new parent(1,2);
Nach dem Login kopieren
Daraus ergibt sich ES5 Das Wesen der Vererbung besteht darin, zuerst ein Instanzobjekt des untergeordneten Elements der Unterklasse zu erstellen und dann die Attribute im Prototypobjekt des übergeordneten Elements der übergeordneten Klasse dem Instanzobjekt des untergeordneten Elements der Unterklasse zuzuweisen und so die Vererbung zu realisieren
2, ES6 Vererbung
In traditionellem JS erfolgt die Generierung von Objekten durch die Erstellung eines Konstruktors, die anschließende Definition des generierten Objekts
function parent(a,b){
this.a = a;
this.b = b;
}Nach dem Login kopieren
und das anschließende Hinzufügen der entsprechenden erforderlichen Methoden oder Attribute über den Prototyp
parent.prototype.methods = function(){
return 'this is test methods';
}
parent.prototype.attr = 'this is test attr‘;Nach dem Login kopieren
. Allerdings wurde in ES6 das Konzept einer Klasse eingeführt. das heißt, Klasse. Objekte werden über das Schlüsselwort class definiert.
Klasse ist ein Schlüsselwort, Sprachzucker, damit Sie das erstellte Objekt klarer verstehen können.
Die von der Steuermethode übergebenen Parameter werden über den Attributkonstruktor empfangen Parameter standardmäßig
class parent{
curstructor(a,b){
this.a = a;
this.b = b;
}
}Nach dem Login kopieren
Die Vererbung in ES6 basiert auf der Vererbung zwischen Klassen. Dies wird durch das Schlüsselwort „extends“ erreicht.
Rufen Sie die übergeordnete Klasse durch Super-Instanziierung auf
class parent{
constructor(a,b){
this.a = a;
this.b = b;
}
parentMethods(){
return this.a + this.b
}
}
class child extends parent{
constructor(a,b,c){
super(a,b);
this.c = c;
}
childMethods(){
return this.c + ',' + super.parentMethods()
}
}
const point = new child(1,2,3);
alert(point.childMethods());Nach dem Login kopieren
Der obige Code ist ein einfacher Satz der ES6-Eltern-Kind-Klassenvererbung.
Ich glaube, Sie haben es gesehen, obwohl der offensichtliche Unterschied darin besteht, dass in ES6 die Supermethode die übergeordnete Komponente aktiviert und nicht eine neue Instanziierung erstellt. Mit anderen Worten, das Instanzobjekt der übergeordneten Klasse wird zuerst erstellt und dann aufgerufen, um dies im Konstruktor der Unterklasse zu ändern, um das Prototypobjekt zu vervollständigen.
Zusammenfassung:
Der größte Unterschied zwischen der ES5- und ES6-Vererbung besteht darin:
ES5 erstellt zuerst die Unterklasse, instanziiert dann die übergeordnete Klasse und fügt sie der Unterklasse hinzu.
ES6 erstellt die übergeordnete Klasse Erstens: Nach dem Zugriff auf das übergeordnete Element durch Aufrufen der Super-Methode in der instanziierten Teilmenge wird die Vererbung durch Modifizieren realisiert
[Lernempfehlung: Javascript-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen der ES6-Vererbung und der ES5-Vererbung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
