Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung

Vererbung von Prototypketten

Die Prototypenvererbung ist die wichtigste Vererbungsmethode in ECMAScript. Die Grundidee besteht darin, die Eigenschaften und Methoden mehrerer Referenztypen über Prototypen zu erben. Was ist eine Prototypenkette? Jeder Konstruktor hat ein Prototypenobjekt. Die durch den Aufruf des Konstruktors erstellte Instanz hat einen Zeiger __proto__, der auf das Prototypenobjekt zeigt. Dieser Prototyp kann eine Instanz eines anderen Typs sein, sodass darin auch ein Zeiger auf einen anderen Prototypen vorhanden sein kann, und so wird eine Prototypenkette gebildet.

Code:
Funktion SuperType() {
	diese.Eigenschaft = wahr;
}
SuperType.prototype.getSuperValue = Funktion() {
	gib diese Eigenschaft zurück;
};
Funktion SubTyp() {
	diese.Untereigenschaft = falsch;
}
// SuperType erben
SubType.prototype = neuer SuperType();
SubType.prototype.getSubValue = function () { //Beachten Sie, dass Sie keine neuen Methoden über Objektliterale hinzufügen können, da sonst die vorherige Zeile ungültig ist. return this.subproperty; 
};
let-Instanz = neuer Subtyp();
console.log(Instanz.getSuperValue()); // wahr

Mangel

1. Wenn das Attribut der Instanz der übergeordneten Klasse ein Referenztyp ist, wird das Instanzattribut der übergeordneten Klasse zum Prototypattribut der Unterklasse. Alle von der Unterklasse erstellten Instanzen teilen sich diese Methoden. Wenn das Attribut einer Instanz geändert wird, werden auch die Attribute anderer Instanzen geändert.

2. Untertypen können beim Instanziieren keine Parameter an den Konstruktor des übergeordneten Typs übergeben

Konstruktorvererbung

Um das Vererbungsproblem zu lösen, das durch Prototypen mit Referenzwerten verursacht wird, ist eine Technik namens „Konstruktordiebstahl“ populär geworden, auch bekannt als „Objektmaskerade“ oder „klassische Vererbung“. Die Idee besteht darin, den Konstruktor in der Unterklasse zu verwenden.

In der Nummer wird der Konstruktor der übergeordneten Klasse aufgerufen. Sie können die Methoden call() und apply() verwenden, um Funktionen mit dem neu erstellten Objekt als Kontext auszuführen.

Funktion SuperType(Name) {
 this.colors = ["rot","blau","grün"];
 dieser.name = Name;
 }
Funktion Subtyp(Name) {
 SuperType.call(diesen,Name);
}
let Instanz1 = neuer SuperType('Xiaoming')
let instance2 = neuer SuperType('Instanz')
Instanz1.Farben .push('gelb')
console.log(Instanz1) //{Name:"Xiao Ming",Farben:["rot","blau","grün","gelb"]...}
console.log(Instanz2) //{Name:"Xiaobai",Farben:["rot","blau","grün"]...}

//Kann Parameter übergeben und Referenzprobleme beheben. Kann mehrere Konstruktoreigenschaften erben (mehrere aufrufen)

Mangel:

1. Methoden können nur im Konstruktor aufgerufen werden. Funktionen können nicht wiederverwendet werden. Das heißt, jedes Mal, wenn eine Unterklasse eine Instanz generiert, werden Attribute und Methoden einmal generiert.
2. Unterklassen können nicht auf Methoden von Prototypen übergeordneter Klassen zugreifen

Vererbung von Kompositionen

Es kombiniert die Prototypenkette und den Konstruktor und bringt die Vorteile beider zusammen. Die Grundidee besteht darin, die Eigenschaften und Methoden des Prototyps über die Prototypkette zu erben und die Instanzeigenschaften über den Konstruktor zu erben. Dadurch können Methoden für die Wiederverwendung im Prototyp definiert werden, wobei jede Instanz gleichzeitig über eigene Eigenschaften verfügen kann.

Funktion SuperType(Name){
	dieser.name = Name;
	this.colors = ["rot","blau","grün"];
}
SuperType.prototype.sayName = Funktion() {
	konsole.log(dieser.name);
};
Funktion SubType(Name, Alter){
	// Geerbte Eigenschaften Zweiter Aufruf SuperType.call(this, name);
	dieses.Alter = Alter;
}
// Der erste Aufruf der geerbten Methode SubType.prototype = new SuperType();
SubTyp.prototyp.sayAge = Funktion() {
	Konsole.log(dieses.Alter);
};
Lassen Sie Instanz1 = neuer Subtyp ("Nicholas", 29);
Instanz1.Farben.Push("schwarz");
console.log(instance1.colors); //["rot,blau,grün,schwarz"]
Instanz1.sayName(); // "Nicholas";
Instanz1.sayAge(); // 29
let instance2 = neuer Subtyp("Greg", 27);
console.log(instance2.colors); // ["rot,blau,grün"]
instance2.sayName(); // "Greg";
Instanz2.sayAge(); // 27

//Kann die Eigenschaften des Prototyps der übergeordneten Klasse erben, kann Parameter übergeben und kann wiederverwendet werden. Von jeder neuen Instanz eingeführte Konstruktoreigenschaften sind privat

Mangel

Das zweimalige Aufrufen des Konstruktors der übergeordneten Klasse verbraucht mehr Speicher

Prototypische Vererbung

Auch ohne benutzerdefinierte Typen zu definieren, können Sie über Prototypen Informationen zwischen Objekten austauschen.

Funktion Objekt(Person) {
 Funktion F() {}
 F.Prototyp = Person
 returniere neues F()
}

lass Person = {
 Name: „Xiaoming“,
 Farben: ['rot','blau']
}

let person1 = Objekt(Person)
person1.colors.push('grün')
let person2 = Objekt(Person)
person1.colors.push('gelb')
console.log(Person) //['rot','blau','grün','gelb']

Anwendungsbereich: Sie haben ein Objekt und möchten darauf basierend ein neues Objekt erstellen. Sie müssen dieses Objekt zuerst an object() übergeben und dann das zurückgegebene Objekt entsprechend ändern. Ähnlich wie Object.create() wird bei Übergabe nur des ersten Parameters im Wesentlichen eine oberflächliche Kopie des übergebenen Objekts erstellt. Der Nachteil besteht darin, dass die Eigenschaften der neuen Instanz später hinzugefügt werden und nicht wiederverwendet werden können.

Parasitäre Vererbung

Ein Vererbungstyp, der der prototypischen Vererbung näher kommt, ist die parasitäre Vererbung, die parasitären Konstruktoren und Factory-Mustern ähnelt: Erstellen Sie eine Funktion, die Vererbung implementiert, erweitern Sie das Objekt auf irgendeine Weise und geben Sie dann das Objekt zurück.

Funktion Objekt(Person) {
 Funktion F() {}
 F.Prototyp = Person
 returniere neues F()
}
Funktion erstelleEin anderes(Original){
	let clone = object(original); // Erstelle ein neues Objekt, indem du eine Funktion aufrufst clone.sayHi = function() { // Erweitere dieses Objekt irgendwie console.log("hi");
};
	return clone; // gib dieses Objekt zurück}

Parasitäre Vererbung eignet sich auch für Szenarien, in denen Sie sich hauptsächlich mit Objekten befassen und sich nicht um Typen und Konstruktoren kümmern.
Nachteile: Das Hinzufügen von Funktionen zu Objekten durch parasitäre Vererbung erschwert die Wiederverwendung von Funktionen, ähnlich wie beim Konstruktormuster

Parasitäre kompositorische Vererbung

Die am häufigsten verwendete Vererbungsmethode ist auch die beste. Bei kombinierter Vererbung wird der Konstruktor der übergeordneten Klasse zweimal aufgerufen, was zu Effizienzproblemen führt. Tatsächlich besteht das Wesen des Unterklassenprototyps darin, alle Instanzeigenschaften des übergeordneten Klassenobjekts zu enthalten. Der Unterklassenkonstruktor muss während der Ausführung nur seinen eigenen Prototyp neu schreiben. Die Grundidee besteht nicht darin, dem Prototyp der Unterklasse durch den Aufruf des Konstruktors der übergeordneten Klasse Werte zuzuweisen, sondern eine Kopie des Prototyps der übergeordneten Klasse zu erhalten. Letztendlich geht es darum, parasitäre Vererbung zu verwenden, um den Prototyp der übergeordneten Klasse zu erben und dann das zurückgegebene neue Objekt dem Prototyp der untergeordneten Klasse zuzuweisen.

//Kerncode-Funktionsobjekt (Person) {
 Funktion F(Params) {}
 F.Prototyp = Person
 returniere neues F()
}
Funktion inheritPrototype(Subtyp,Supertyp) {
 let prototype = object(SuperType.prototype) //Erstelle eine Kopie des Prototyps der übergeordneten Klasse //Überschreibe den Konstruktor dieser Instanz
 prototype.constructor = Untertyp

 //Weisen Sie diese Objektkopie dem Prototyp der Unterklasse zu SubType.prototype = prototype
}

Funktion SuperType(Name) {
	dieser.name = Name;
	this.colors = ["rot","blau","grün"];
}
SuperType.prototype.sayName = Funktion() {
	konsole.log(dieser.name);
};
Funktion SubType(Name, Alter) {
	SuperType.call(dieser, Name);
	dieses.Alter = Alter;
}

//Rufen Sie die Funktion inheritPrototype auf, um den Prototypwert der Unterklasse zuzuweisen und so das Problem der kombinierten Vererbung zu beheben inheritPrototype(SubType, SuperType);

SubTyp.prototyp.sayAge = Funktion() {
	Konsole.log(dieses.Alter);
};

Zusammenfassen

Damit ist dieser Artikel über 6 Möglichkeiten der JS-Vererbung abgeschlossen. Weitere relevante Inhalte zur JS-Vererbung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!