6 Vererbungsmethoden von JS Advanced ES6

Vorwort:

Vererbung ist ein häufiges Thema in der objektorientierten Programmierung. Vor ECMAScript6 war die Vererbung in JavaScript sehr kompliziert. Es gab verschiedene Arten der Vererbung. Im Wesentlichen waren alle Vererbungen untrennbar mit der Prototypenkette verbunden. Das neu hinzugefügte Schlüsselwort extends ES6 implementiert ebenfalls Vererbung durch die Prototypenkette, aber die Syntax ist relativ einfacher.

In Bezug auf den Inhalt der Prototypkette können Sie sich auf die beiden Bilder im vorherigen Artikel beziehen, um die Prototypkette zu verstehen

Dieser Artikel stellt vor, wie Vererbung vor ECMAScript6 implementiert wurde.

1. Vererbung der Prototypkette

Mithilfe der Vererbung der Prototypkette besteht das Wesentliche darin, die Zeiger des Prototyps zu ändern. Der Implementierungscode lautet wie folgt:

Funktion ÜbergeordneteKlasse() {
  this.name = 'Eine Schüssel Zhou'
}
ParentClass.prototype.getName = Funktion () {
  gib diesen Namen zurück
}

// Definieren Sie eine Unterklasse, die die übergeordnete Klasse in der Zukunft erbt Funktion ChildClass() {}

// * Zeigen Sie mit dem Prototyp der Kindklasse auf die Instanziierung der Elternklasse. Die Kindklasse hat den Inhalt der Instanziierung der Elternklasse ChildClass.prototype = new ParentClass()

// Instanziieren Sie die Unterklasse var child = new ChildClass()

console.log(child.getName()) // Yiwan Zhou

Der obige Code wird wie folgt veranschaulicht:

Die rote Linie in der Abbildung stellt die Prototypenkette zwischen dem Konstruktor und dem Instanzobjekt dar. Die Vererbung wird durch die Beziehung dieser Prototypenkette erreicht.

Ein Nachteil dieser Implementierung der Vererbung besteht darin, dass mehrere Instanzen dazu führen, dass der Inhalt des Prototypobjekts gemeinsam genutzt wird und sich die Inhalte gegenseitig beeinflussen. Der Testcode lautet wie folgt:

Funktion ÜbergeordneteKlasse() {
  this.colors = ['rot', 'blau', 'grün']
}
Funktion ChildClass() {}

UntergeordneteKlasse.prototype = neue übergeordneteKlasse()

var child1 = neue ChildClass()
var child2 = neue ChildClass()
console.log(child1.colors) // [ 'rot', 'blau', 'grün' ]

child2.colors.push('schwarz')
console.log(child2.colors) // [ 'rot', 'blau', 'grün', 'schwarz' ]

console.log(child1.colors) // [ 'rot', 'blau', 'grün', 'schwarz' ]

child1 wird im Testcode nicht geändert, aber nachdem child1 geändert wurde, wird auch der Wert in child1 geändert.

2. Vererbung mit Konstruktoren

Die sogenannte Vererbung mithilfe von Konstruktoren (in einigen Materialien wird sie auch als Pseudoobjekt- oder klassische Vererbung bezeichnet) besteht darin, die Vererbung abzuschließen, indem der Konstruktor der übergeordneten Klasse mithilfe der Methode Function.call () oder Function.apply () über das untergeordnete Objekt aufgerufen wird.

Der Beispielcode lautet wie folgt:

Funktion Übergeordnet() {
  // Übergeordnetes Objekt this.parent = "parent"
}

Parent.prototype.name = 'Yiwan Zhou' // Dem Prototyp des übergeordneten Objekts Parent Eigenschaften hinzufügen Funktion Child() {
  // Untergeordnetes Objekt this.child = "child"

  Parent.call(this) // Verwenden Sie die Methode call() oder apply(), um den übergeordneten Konstruktor aufzurufen und die Vererbung zu implementieren.
}

const Kind = neues Kind()

console.log(Kind)

console.log(child.name) // undefiniert // Der Prototyp der übergeordneten Klasse wird nicht geerbt

Der Ausführungsablauf ist wie folgt:

Der Vorteil dieser Methode besteht darin, dass sie vermeidet, dass Instanzen von Referenztypen von allen Objekten gemeinsam genutzt werden. Der Nachteil besteht darin, dass alle Methoden im Konstruktor definiert sind und daher nicht das Prototypobjekt erben. Außerdem werden diese Methoden nach der Instanziierung jedes Objekts neu erstellt, was Speicherplatz beansprucht, ganz zu schweigen von der Wiederverwendung von Funktionen.

3. Kombinatorische Vererbung

Die beiden Vererbungsmethoden, die wir zuvor gemeistert haben, haben beide ihre Mängel. Bei der Vererbungsmethode, die auf Prototypvererbung basiert, teilen sich alle instanziierten Objekte die Methoden und Eigenschaften des Prototyps. Wenn es eine Änderung gibt, wird alles geändert. Allerdings ist eine Übernahme der Prototypeigenschaften durch die Konstruktorvererbung nicht möglich. Daher ist die kombinierte Vererbung entstanden, eine Art der Vererbung, bei der die prototypbasierte Vererbungsmethode mit der Vererbungsmethode mithilfe von Konstruktoren kombiniert wird, wobei das Wesentliche erhalten bleibt und der Überschuss entfernt wird.

Die Grundidee der Implementierung kombinierter Vererbung ist wie folgt:

• Verwenden Sie Prototypenverkettung oder prototypische Vererbung, um die Eigenschaften und Methoden eines Prototyps zu erben.
• Die Vererbung von Instanzobjekteigenschaften wird über den Strukturkonstruktor erreicht.

Auf diese Weise wird durch die Definition von Methoden für den Prototyp eine Wiederverwendung von Funktionen erreicht und es kann garantiert werden, dass jedes Objekt seine eigenen, eindeutigen Eigenschaften hat.

Der Beispielcode lautet wie folgt:

// Übergeordnetes Objekt Funktion Parent() {
  this.parent = "übergeordnet"
}
// Dem Prototyp des übergeordneten Objekts Parent Eigenschaften hinzufügen Parent.prototype.name = 'Yiwan Zhou'
//Unterobjekt Funktion Child() {
  dieses.Kind = "Kind"
  // Verwenden Sie die Methode call() oder apply(), um den übergeordneten Konstruktor aufzurufen und die Vererbung zu implementieren.
  Übergeordnetes Element.call(dieses)
}
// Lösen Sie das Problem von Prototypobjekten, die keine Konstruktoren erben. Child.prototype = Parent.prototype

const Kind = neues Kind()
console.log(Kind.Name) // Yiwan Zhou

4. Prototypenvererbung

Wir können die Methode Object.create() verwenden, um eine Art Vererbung zu implementieren. Der Beispielcode lautet wie folgt:

var Person = {
  Name: 'Eine Schale Zhou',
  Freunde: ['Zhang San', 'Li Si', 'Wang Wu'],
}

var eine anderePerson = Objekt.erstellen(Person)
anotherPerson.name = 'Eine Schüssel Süßigkeiten'
anotherPerson.friends.push('Freunde')

console.log(Person.Freunde) // [ 'Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu' ]

Der Nachteil dieser Methode ist derselbe wie bei der ersten. Mehrere Instanzen führen dazu, dass der Inhalt des Prototypobjekts gemeinsam genutzt wird und sich die Inhalte gegenseitig beeinflussen.

5. Parasitäre Vererbung

Die Grundlage der parasitären Vererbung besteht darin, das Objekt zu erweitern und den Konstruktor auf der Grundlage der Prototypvererbung zurückzugeben. Der Beispielcode lautet wie folgt:

var Person = {
  Name: 'Eine Schale Zhou',
  Freunde: ['Zhang San', 'Li Si', 'Wang Wu'],
}

Funktion erstelleEin anderes(Original) {
  var clone = Object.create(original) // Erstelle ein neues Objekt indem du die Funktion object() aufrufst clone.sayMe = function () {
    // Verbessern Sie das Objekt irgendwie}
  return clone // Dieses Objekt zurückgeben }

var eine anderePerson = erstelleEine andere(Person)
eine anderePerson.sayMe()

Die Nachteile sind die gleichen wie bei der nativen Vererbung.

6. Parasitäre kombinatorische Vererbung

Diese Vererbungsmethode wird durch Übergabe von Parametern durch den Konstruktor und parasitäre Vererbung implementiert. Der Beispielcode lautet wie folgt:

Funktion inheritPrototype(UntergeordneteKlasse, ÜbergeordneteKlasse) {
  var prototype = Object.create(ParentClass.prototype) // Ein Objekt erstellen und eine Kopie des Prototyps der übergeordneten Klasse erstellen // Den Konstruktor der erstellten Kopie des Prototyps der übergeordneten Klasse ändern und den Prototyp der untergeordneten Klasse auf diese Klasse verweisen, wodurch eine Klasse entsteht, die nichts mit dem Prototyp der übergeordneten Klasse zu tun hat.constructor = ChildClass
  ChildClass.prototype = Prototyp
}

// Übergeordnete Klasse initialisiert Instanzeigenschaften und Prototypeigenschaften Funktion ParentClass(name) {
  dieser.name = Name
  this.colors = ['rot', 'blau', 'grün']
}
ParentClass.prototype.sayName = Funktion () {
  console.log(dieser.Name)
}

//Verwenden Sie den Konstruktor, um erweiterte Instanzeigenschaften der Unterklasse zu übergeben (unterstützen Sie die Parameterübergabe und vermeiden Sie Manipulationen).
Funktion ChildClass(Name, Alter) {
  //Alle Eigenschaften der übergeordneten Klasse kopieren ParentClass.call(this, name)
  this.age = Alter
}

// Zeigen Sie mit dem Prototyp der übergeordneten Klasse auf die untergeordnete Klasse inheritPrototype(ChildClass, ParentClass)

// Unterklassen-Prototyp-Eigenschaft hinzufügen ChildClass.prototype.sayAge = function () {
  console.log(dieses.Alter)
}

var Instanz1 = neue ChildClass('Instanz', 19)
var instance2 = new ChildClass('Eine Schüssel Süßigkeiten', 18)

Instanz1.Farben.Push('schwarz')
console.log(instance1.colors) // [ 'rot', 'blau', 'grün', 'schwarz' ]
instance1.sayName() // Eine Schüssel Zhouinstance2.colors.push('yellow')
console.log(instance2.colors) // [ 'rot', 'blau', 'grün', 'gelb' ]

Dieses Beispiel ist effizient, da es ParentClass Konstruktor nur einmal aufruft und somit die Erstellung unnötiger, redundanter Eigenschaften in ChildClass.prototype vermeidet. Gleichzeitig bleibt die Prototypenkette unverändert; daher können instanceof und isPrototypeOf()。

Wenn Sie es nicht verstehen, lesen Sie weiter. Zuerst extrahieren wir den Kerncode, wie unten gezeigt:

Das obige Bild zeigt unseren Kerncode. Schauen wir uns an, wie die Standardprototypenketten von ParentClass und ChildClass aussehen.

Das Bild sieht wie folgt aus:

Dann rufen wir die Methode inheritPrototype() auf und ändern den Prototyp von ChildClass. Das Parsing-Diagramm sieht wie folgt aus:

Vergessen Sie nicht, die übergeordnete Klasse über call() in der Unterklasse aufzurufen, um die eigenen Eigenschaften der übergeordneten Klasse zu copy . Dadurch wird eine relativ vollständige Vererbungsmethode erreicht.

Abschluss:

In diesem Artikel werden neben dem Schlüsselwort extends sechs Vererbungsmethoden vorgestellt. Obwohl class und alle klassenbezogenen Inhalte in ECMAScript6 hinzugefügt wurden, werden die im Text vorgestellten Vererbungsmethoden nicht mehr häufig verwendet.

Die neuen Klassen, die ECMAScript6 hinzugefügt wurden, sind jedoch im Wesentlichen syntaktischer Zucker. Wenn wir in JavaScript über Vererbung sprechen, können wir nicht auf das Schlüsselwort class verzichten.

Damit ist dieser Artikel über die 6 Vererbungsmethoden von JS Advanced ES6 abgeschlossen. Weitere Informationen zu den 6 Vererbungsmethoden von ES6 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!