Eintauchen in die JS-Vererbung

Vorwort

Für flexibles JS gibt es im Vergleich zu Sprachen wie Java viele verschiedene Implementierungsmethoden für Vererbung. Durch die Methodenvielfalt ergeben sich eine Vielzahl an Erkenntnispunkten, denen man bei Interviews natürlich nicht aus dem Weg gehen kann. Wenn Sie ES6-Klassen außer Acht lassen, wie viele traditionelle Vererbungsmethoden kennen Sie? Was sind die jeweiligen Umsetzungsprinzipien? Können Sie über die Vor- und Nachteile sprechen? Hier wird die Entwicklung der Vererbung schrittweise und anhand konkreter Beispiele beleuchtet.

Vorbereiten

Bevor wir über die JS-Vererbung sprechen, wollen wir uns ansehen, wie JS Objekte instanziiert.

Ein Konstruktor ist eine Funktion, die ein Objekt über new instanziieren kann. Der Zweck besteht darin, ihn wiederzuverwenden und zu vermeiden, jedes Mal Objektinstanzen manuell deklarieren zu müssen.

Die neue einfache Implementierung sieht wie folgt aus:

Funktion mein_neu(Funktion){
    var obj = {}
    obj._proto_ = func.prototype // Ändere den Prototype-Kettenpunkt und füge ihn in die Func-Prototype-Kette ein func.call(obj) // Zuweisung von Instanzattributen return obj
}

Wie aus dem Obigen ersichtlich ist, können durch den Konstruktoraufruf dem Zielobjekt Instanzattribute zugewiesen werden.

Daraus lässt sich schließen, dass durch den Aufruf des Konstruktors der übergeordneten Klasse in der Unterklasse auch der Zweck der Vererbung erreicht werden kann.

Dies bietet eine Möglichkeit zum Erben von js, d. h. zum Aufrufen über den Konstruktor.

Was die Prototypattribute betrifft, wird die gemeinsame Nutzung von Prototypattributen durch Ändern des Prototypzeigers erreicht.

Die gleiche Methode kann für die Vererbung verwendet werden.

Zusammenfassen

Basierend auf den beiden Funktionen Konstruktor und Prototypkette, kombiniert mit der Flexibilität der JS-Sprache.

Obwohl es viele Möglichkeiten gibt, Vererbung zu implementieren, folgen sie alle demselben Prinzip.

n Arten der Vererbung

Prototypische Vererbung

Definition: Diese Art der Vererbung, bei der Prototypen verwendet werden, um neue Objekte auf der Grundlage vorhandener Objekte zu erstellen, ohne benutzerdefinierte Typen zu erstellen, wird als prototypische Vererbung bezeichnet.

Es ist klarer, wenn man sich den Code direkt anschaut:

Funktion erstelleObj(o) {
  Funktion F() { }
  F.Prototyp = o;
  gib neues F() zurück;
}
var übergeordnetes Element = {
  Name: 'trigkit4',
  arr: ['Bruder', 'Schwester', 'Baba']
};
var Kind1 = Objekt erstellen(Elternteil);

Oberflächlich betrachtet basiert diese Methode auf der Objekterstellung und erfordert keinen Konstruktor (der eigentliche Konstruktor ist natürlich gekapselt). Es wird nur das Prototypobjekt verwendet, daher lautet der Name Prototypvererbung.

Mangel:

Der offensichtlichere Vorgesetzte

Diese Vererbung kann nicht wiederverwendet werden und jede Unterklasseninstanz muss den vollständigen createObj-Prozess durchlaufen.

Für Unterklassenobjekte

Da der Konstruktor in createObj gekapselt ist, gibt es dafür keinen Konstruktor. Dies führt dazu, dass während der Initialisierung keine Parameter übergeben werden können.
Ergänzung: createObj ist das in ES6 üblicherweise verwendete Object.create(), aber Object.create wurde verbessert, um zusätzliche Parameter zuzulassen.

Lösung:

Da das Problem durch das Fehlen eines Konstruktors verursacht wird, ist die Vermutung naheliegend, dass die Vererbung des Konstruktors in der Prototypkette eine Rolle spielt.

Vererbung von Prototypketten

Definition: Damit eine Unterklasse die Eigenschaften (einschließlich Methoden) ihrer übergeordneten Klasse erbt, müssen Sie zuerst einen Konstruktor definieren. Anschließend wird dem Prototyp des Konstruktors eine neue Instanz der Superklasse zugewiesen.

Funktion Übergeordnet() {
  dieser.name = "mike";
}
Funktion Kind() {
  dieses.Alter = 12;
}
Kind.Prototyp = neues Elternteil();
child.prototype.contructor = child // Die Prototype-Eigenschaft wurde überschrieben und muss daher korrigiert werden.
var Kind1 = neues Kind();

Das bedeutet, dass das Prototypobjekt der Unterklasse direkt so geändert wird, dass es auf die Instanz des übergeordneten Konstruktors verweist, sodass die Instanzattribute und Prototypattribute der übergeordneten Klasse an ihrer eigenen Prototypkette hängen.

Mangel

Child.prototype = new Parent() , dann wird die prototype -Eigenschaft der Kindfunktion selbst überschrieben und muss ggf. später ergänzt werden.

Wenn ein untergeordnetes Objekt instanziiert wird, können keine Parameter an den Konstruktor der übergeordneten Klasse übergeben werden.
Wenn Sie beispielsweise bei der Ausführung von „new Child()“ den Namen überschreiben möchten, können Sie dies nur tun, wenn „Child.prototype = new Parent()“. Es ist eine allgemeinere Anforderung, Parameter einheitlich zu übergeben und sie zu initialisieren, wenn wir ein neues Child() erstellen.

Lösung

So rufen Sie den Konstruktor der übergeordneten Klasse auf, wenn die Unterklasse initialisiert wird. In Kombination mit den vorherigen Grundlagen liegt die Antwort auf der Hand.

Konstruktoren ausleihen (Klassenvererbung)

Klassenvererbung: Aufruf des Supertyp-Konstruktors innerhalb des Subtyp-Konstruktors.

Die Ideen sind relativ klar und problemorientiert.

Da Unterklassen von Prototypketten keine Parameter an übergeordnete Klassen übergeben können, wäre es dann nicht ausreichend, beim Initialisieren der Unterklasse die übergeordnete Klasse aufzurufen?

Hier ist ein Beispiel:

Funktion Elternteil(Alter) {
  dieser.name = ['mike', 'jack', 'smith'];
  dieses.Alter = Alter;
}
Übergeordnet.prototype.run = Funktion () {
  returniere diesen.Namen + 'sind beide' + dieses.Alter;
};
Funktion Kind(Alter) {
  //Rufen Sie die übergeordnete Klasse auf. Parent.call(this, age);
}
var Kind1 = neues Kind(21);

Dadurch wird die Anforderung der Parameterübertragung während der Initialisierung erfüllt, das Problem liegt jedoch auch auf der Hand.

child1.run //undefiniert

Frage

Das Prototyp-Attribut der übergeordneten Klasse geht verloren

Bei der Initialisierung der übergeordneten Klasse werden nur die Beispieleigenschaften übernommen, die Prototypeigenschaften gehen in der Prototypenkette der untergeordneten Klasse verloren.

Lösung

Der Grund für den Verlust liegt darin, dass die Prototypkette den Zeiger nicht ändert. Warum also nicht einfach den Zeiger ändern?

Vererbung von Kompositionen

Definition: Verwenden Sie die Prototypkette, um die Vererbung von Prototypeigenschaften und -methoden zu implementieren, und verwenden Sie den Konstruktor, um die Vererbung von Instanzeigenschaften zu implementieren.

Beispiel:

Funktion Elternteil(Alter) {
  dieser.name = ['mike', 'jack', 'smith'];
  dieses.Alter = Alter;
}
Übergeordnet.prototype.run = Funktion () {
  returniere diesen.Namen + 'sind beide' + dieses.Alter;
};
Funktion Kind(Alter) {
  //Rufen Sie den Konstruktor der übergeordneten Klasse auf. Parent.call(this, age);
}
Child.prototype = new Parent(); //Vererbung der Prototyp-Eigenschaft Child.prototype.contructor = Child
var Kind1 = neues Kind(21);

Dieses Problem wird vermieden:

child1.run() // "Mike, Jack, Smith sind beide 21"

Frage

Sobald die Funktionalität erfüllt ist, ist es Zeit, sich auf die Leistung zu konzentrieren. Das Problem bei dieser Vererbungsmethode besteht darin, dass der Konstruktor der übergeordneten Klasse zweimal ausgeführt wird.

Sie sind:

Funktion Kind(Alter) {
  //Rufen Sie den Konstruktor der übergeordneten Klasse ein zweites Mal auf. Parent.call(this, age);
}
Child.prototype = new Parent(); //Ändern Sie die Prototypenkette, die auf das erste Mal zeigt

Lösung

Die natürliche Lösung besteht darin, einen Konstruktoraufruf abzubrechen. Dazu müssen Sie natürlich die beiden Ausführungen analysieren, um zu sehen, ob es eine Duplizierung der Funktionalität gibt.

Beim ersten Mal erbt es auch die Instanz- und Prototypeigenschaften, beim zweiten Mal auch die Instanzeigenschaften der übergeordneten Klasse.

Daher ist der Parameter der übergeordneten Klasse beim zweiten Mal nicht verfügbar. Wir können also nur darüber nachdenken, ob wir den Konstruktor der übergeordneten Klasse nicht beim ersten Mal aufrufen und nur die Prototyp-Eigenschaften erben können.

Die Antwort ist natürlich ja, die bisherige Prototypenvererbung basiert auf dieser Idee.

Parasitäre kombinatorische Vererbung

Wie der Name schon sagt, bezieht sich Parasitismus auf die Kapselung der Methode zur Vererbung von Prototypeigenschaften in einer bestimmten Methode, und die Kombination kombiniert Konstruktorvererbung, um die Mängel der Prototypvererbung zu beheben.

Verzeihen Sie mir, schauen Sie einfach:

Funktion erstelleObj(o) {
  Funktion F() { }
  F.Prototyp = o;
  gib neues F() zurück;
}
//Erben von Prototyp-Eigenschaften, d.h. Vererbung von Prototypen function create(parent, child) { 
  var f = createObj(parent.prototype); //Prototypobjekt abrufen child.prototype = f
  child.prototype.constructor = child; //Erweitern Sie den Objektprototyp, d. h. behalten Sie den ursprünglichen Konstruktor bei, der auf zeigt}

Funktion Übergeordnet(Name) {
  dieser.name = Name;
  this.arr = ['Bruder', 'Schwester', 'Eltern'];
}
Übergeordnet.prototype.run = Funktion () {
  gib diesen Namen zurück;
};
Funktion Kind(Name, Alter) {
  //Beispieleigenschaft Parent.call(this, name);
  dieses.Alter = Alter;
}
// Die Vererbung von Prototypeigenschaften ist bei dieser Methode parasitär create(Parent.prototype,Child);
var child1 = neues Child('trigkit4', 21);

Auf diese Weise folgen wir der Idee, Probleme zu entdecken und zu lösen, bis wir zu einer relativ vollständigen Vererbungsmethode gelangen. Auf die ES-Methode wird in diesem Artikel nicht eingegangen.

Abschluss

Nur mit viel Anhäufung kann man viel erreichen. Wer das gewünschte Angebot bekommen will, muss gut vorbereitet sein und ein solides Fundament legen. Seien Sie nicht zweideutig. Ich verstehe das Prinzip, aber meine Antwort ist unvollständig. Das ist nicht viel anders, als es überhaupt nicht zu verstehen. Setzen Sie sich in diesen nicht mehr ganz so neuen Tagen das Ziel, jede Woche drei Wissenspunkte zu wiederholen. Glauben Sie daran, dass Schmetterlinge zu Ihnen kommen, wenn Sie blühen.

Oben finden Sie ausführliche Informationen zur JS-Vererbung. Weitere Informationen zur JS-Vererbung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!