Erben Sie die Methoden einer anderen Klasse mithilfe von Extend Keyword in JavaScript

Mit den zusätzlichen Funktionen und der einfacheren Klassensyntax hat ES6 JavaScript viel einfacher gemacht. Zuvor wurde die JavaScript -Erbschaft mit dem Objekt ermöglicht.Prototyp -Eigenschaft, die im Vergleich zu Java und C ++ und anderen solchen Programmiersprachen sehr unterschiedlich und komplex war.

In diesem Beitrag werden wir uns untersuchen Nachlass in JavaScript mit dem “erweitertSchlüsselwort in JavaScript. Beispiele helfen dabei, das Konzept stark zu erfassen, also werden wir auch Beispiele geben. Lass uns anfangen.

Was ist Vererbung?

Wie jede andere Programmiersprache ist die Vererbung ein sehr wichtiges Konzept in der javaScript-objektorientierten Programmierung. Die einfachste Definition der Vererbung ist, wenn Methoden und Attribute einer übergeordneten Klasse oder einer Basisklasse in abgeleitete oder untergeordnete Klassen kopiert oder vererbt werden. Dies ist sehr nützlich, da wir in der Lage sind, Code -Wiederverwendbarkeit zu erreichen. Die Wiederverwendbarkeit von Code bedeutet, Attribute/Eigenschaften und Methoden einer Klasse in einer anderen neu erstellten Klasse wiederzuverwenden.

Erweitert das Schlüsselwort

Jetzt, wo wir uns angesehen haben, was Erbschaft ist. Lassen Sie uns diskutieren, wie wir dies erreichen können. Wie bereits erwähnt, haben wir früher die Vererbung über Objekt erreicht.Prototyp, der als prototypische Vererbung bezeichnet wird. Es wurde jedoch ein einfacherer Ansatz verfolgt, der das Extend -Keyword verwendete.

Die Funktion der Erweiterung von Schlüsselwörtern wird verwendet, um eine abgeleitete Klasse/untergeordnete Klasse aus einer übergeordneten Klasse/Basisklasse zu erstellen. Die untergeordnete Klasse kann jede Klasse erben und diese Klasse wird zur Elternklasse. Wenn wir erben, werden in der untergeordneten Klasse alle Methoden und Attribute von der übergeordneten Klasse vererbt.

Syntax:

Klasse Child Class erweitert die Elternklasse;

Es sollte beachtet werden, dass es nur in der Version von ECMAScript 2015 (ES6) funktioniert.

Welcher Browser unterstützt das Schlüsselwort "Erweitern"?

Lassen Sie uns nun sehen, welche Browser das Schlüsselwort „Erweitern“ unterstützen.

Chrom	Rand	Feuerfuchs	Safari	Oper
49.0	13.0	45.0	9.0	36.0

Nachdem wir die Theorie der Vererbung und das Schlüsselwort „Erweiterung“ behandelt haben, lassen Sie es uns in JavaScript implementieren.

Beispiel:

classanimalname
Konstruktor (Name)
Das.AnimalName = Name;

gegenwärtig()
return'name: ' + das.Tiername;


classanimalextensArimalname
Konstruktor (Name, Menge)
Super (Name);
Das.Menge = Menge;

Welches tier()
Rückkehr.Present () + "Menge:" + dies.Menge;


Const Animal = neues Tier ("Hühnchen", 5);
Alarm (Tier.Welches tier());

In diesem Beispiel haben wir eine übergeordnete Klasse „AnimalName“, in der wir den Namen des Tieres festlegen. Es hat eine Methode mit dem Namen "präsent ()" ". Wir haben eine andere Klasse "Tier", die "AnimalName" erweitert. Es bedeutet. Wir haben eine Methode in der "Tier" -Klasse mit dem Namen "WhatAnimal ()" ". Darin erben wir die Klassenmethode „AnimalName“ -Methode „präsent“ und erstellte dann eine Instanz der „Tier“ -Klasse. Wenn wir nun die Funktion WhatAnimal () aufmerksam machen, funktioniert es richtig.

Es ist erwähnenswert, dass wir das Schlüsselwort Super () verwendet haben, um sich im obigen Beispiel auf die übergeordnete Klasse zu beziehen. Wenn wir die Super () -Methode anrufen.

Nutzung von Getter und Setter in der Vererbung

Wenn wir Klassen und Erbschaft verwenden, ist es fast unmöglich, Getter und Setter nicht zu verwenden. Es ist sehr hilfreich, Eigenschaften abzurufen oder zu aktualisieren, bevor diese Eigenschaften zurückgegeben oder festgelegt werden.

Das Schlüsselwort „GET“ wird verwendet, um eine Eigenschaft abzurufen oder zu erhalten. Das Schlüsselwort „Set“ wird verwendet, um eine Eigenschaft zu aktualisieren oder festzulegen.

Zum Beispiel:

classanimalname
Konstruktor (Name)
Das._AnimalName = Name;

Holen Sie sich Getanimalname ()
Rückkehr._animalname;

Set SetAnimalName (nam)
Das._AnimalName = nam;

gegenwärtig()
return'name: ' + das._animalname;


classanimalextensArimalname
Konstruktor (Name, Menge)
Super (Name);
Das.Menge = Menge;

Welches tier()
Rückkehr.Getanimalname;


Const Animal = neues Tier ("Hühnchen", 5);
Alarm (Tier.Welches tier());

In diesem Beispiel haben wir den Unterstrich -Charakter verwendet, weil wir Getter/Setter von der tatsächlichen Attribut/Eigenschaft trennen wollten, um besseres Verständnis zu erhalten. Dieses Beispiel ist identisch mit der vorherigen, mit der Ausnahme, dass die "AnimalName" -Klasse jetzt einen Getter und Setter enthält. Wir holen den Tiernamen aus der übergeordneten Klasse durch die GET -Methode, die "Getanimalname" lautet.

Wir können auch eine Eigenschaft auf die gleiche Weise festlegen, indem wir nur eine weitere Zeile mit dem obigen Code hinzufügen.

classanimalname
Konstruktor (Name)
Das._AnimalName = Name;

Holen Sie sich Getanimalname ()
Rückkehr._animalname;

Set SetAnimalName (nam)
Das._AnimalName = nam;

gegenwärtig()
return'name: ' + das._animalname;


classanimalextensArimalname
Konstruktor (Name, Menge)
Super (Name);
Das.Menge = Menge;

Welches tier()
Rückkehr.Getanimalname;


Const Animal = neues Tier ("Hühnchen", 5);
Tier.setAnimalname = "Cow";
Alarm (Tier.Welches tier());

Die Ausgabe wird nun auf "Cow" aktualisiert.

Abschluss

Die Vererbung ist eines der Kernkonzepte der objektorientierten Programmierung, und die Definition der Vererbung kann definiert werden, wenn die Methoden und Attribute einer übergeordneten oder Basisklasse in eine untergeordnete oder abgeleitete Klasse kopiert/vererbt werden und mit dem Schlüsselwort erreicht werden können erweitert In JavaScript.

Wenn Sie diesen Artikel gründlich lesen, bin ich mir ziemlich sicher, dass ihr eine Vorstellung davon hat, wie das erweiterte Schlüsselwort beim Zugriff auf die übergeordneten Klassenmethoden und -attribute in JavaScript verwendet wird. Wir haben die Vererbung erklärt, das Schlüsselwort erweitern, Schlüsselwort festlegen, Keyword erhalten und welcher Browser das Extend -Keyword unterstützt. Prototypaler Vererbung, wie zu Beginn dieses Artikels angegeben ist, ist veraltet und komplex. Erweiterung ist einfacher und ähnlich wie bei anderen Sprachen wie Java, C ++ usw.