Einfache Vererbung mit JavaScript

Key Takeaways

• JavaScript verwendet einen prototypbasierten Ansatz, um eine objektorientierte Sprache zu erstellen, mit der das Verhalten wiederverwendet wird, indem vorhandene Objekte klonen, die als Prototypen dienen. Dieses Konzept kann verwendet werden, um die Vererbung zu simulieren.
• Vererbung kann in JavaScript implementiert werden, indem eine Funktion erstellt wird, die den Prototyp kloniert, wodurch alle Mitglieder und Funktionen in die neue Klasse übertragen werden. Dies ermöglicht die Erstellung einer Hierarchie von Klassen, in denen jede Klasse Funktionen und Mitglieder aus ihrer übergeordneten Klasse erben kann.
• Während JavaScript einen einzigartigen Ansatz für objektorientierte Programmierungen hat, ist es für Entwickler von Sprachen wie C# oder C wichtig, um zu verstehen, dass der Versuch, ihre vertraute Sprache in JavaScript zu replizieren, möglicherweise nicht die besten Ergebnisse liefert. Stattdessen kann die Einbeziehung der einzigartigen Philosophie von JavaScript ihre volle Kraft freischalten.

Dieser Artikel ist Teil einer Web Dev Tech -Serie von Microsoft. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Viele meiner Freunde sind C #- oder C -Entwickler. Sie sind es gewohnt, die Vererbung in ihren Projekten zu verwenden, und wenn sie JavaScript lernen oder entdecken möchten, ist eine der ersten Frage, die sie stellt: „Aber wie kann ich Vererbung mit JavaScript machen?“

Tatsächlich verwendet JavaScript einen anderen Ansatz als C# oder C, um eine objektorientierte Sprache zu erstellen. Es ist eine prototypbasierte Sprache. Das Konzept des Prototyps impliziert, dass das Verhalten wiederverwendet werden kann, indem vorhandene Objekte kloniert werden, die als Prototypen dienen. Jedes Objekt in JavaScript weist aus einem Prototyp ab, der eine Reihe von Funktionen und Mitgliedern definiert, die das Objekt verwenden kann. Es gibt keine Klasse. Nur Objekte. Jedes Objekt kann dann als Prototyp für ein anderes Objekt verwendet werden.

Dieses Konzept ist äußerst flexibel und wir können es verwenden, um einige Konzepte aus OOP -ähnlichen Vererbung zu simulieren.

Implementierung der Vererbung

Lassen Sie uns visualisieren, was wir mit dieser Hierarchie mit JavaScript erstellen möchten:

Zunächst können wir einfach Classa erstellen. Da es keine expliziten Klassen gibt, können wir eine Reihe von Verhaltensweisen (eine Klasse so…) definieren, indem wir einfach eine Funktion wie folgt erstellen:

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

Diese „Klasse“ kann mit dem neuen Schlüsselwort instanziiert werden:

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

und um es mit unserem Objekt zu verwenden:

a<span>.print();</span>

ziemlich einfach, oder?

Das komplette Beispiel ist nur 8 Zeilen lang:

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

Fügen wir nun ein Tool hinzu, um "Vererbung" zwischen Klassen zu erstellen. Dieses Tool muss nur eine einzige Sache machen: Klonen des Prototyps:

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

genau hier passiert die Magie! Durch Klonen des Prototyps übertragen wir alle Mitglieder und Funktionen in die neue Klasse.

Wenn wir also eine zweite Klasse hinzufügen möchten, die ein Kind des ersten sein wird, müssen wir diesen Code nur verwenden:

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

Da ClassB die Druckfunktion von Classa geerbt hat, funktioniert der folgende Code:

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

und erzeugt die folgende Ausgabe:

a<span>.print();</span>

Wir können die Druckfunktion für ClassB sogar überschreiben:

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

In diesem Fall sieht der produzierte Ausgang so aus:

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

Der Trick hier ist die Aufrufklasse, um die Basisdruckfunktion zu erhalten. Dank der Anruffunktion können wir die Basisfunktion im aktuellen Objekt (this) aufrufen.

Klassen erstellen ist jetzt offensichtlich:

<span>var <span>ClassB</span> = function() {
</span>    <span>this.name = "class B";
</span>    <span>this.surname = "I'm the child";
</span><span>}
</span>
<span>inheritsFrom(ClassB, ClassA);</span>

und die Ausgabe ist:

<span>var b = new ClassB();
</span>b<span>.print();</span>

mehr praktisch mit JavaScript

Es könnte Sie vielleicht ein bisschen überraschen, aber Microsoft hat ein paar kostenlose Lernen auf vielen Open -Source -JavaScript -Themen und wir sind auf der Mission, mit Project Spartan Coming viel mehr zu schaffen. Schauen Sie sich meine eigene an:

• Einführung in WebGL 3D, HTML5 und babylon.js
• Erstellen einer einzelnen Seitenanwendung mit ASP.NET und AngularJS
• innovative Grafiken in HTML

oder die Lernserie unseres Teams:

• Praktische Leistungstipps, um Ihr HTML/JavaScript schneller zu gestalten (eine 7-teilige Serie vom reaktionsschnellen Design bis hin zu Casual Games bis zur Leistungsoptimierung)
Die moderne Webplattform Jumpstart (die Grundlagen von HTML, CSS und JS)
Entwicklung von universellen Windows -Apps mit HTML- und JavaScript -Jumpstart (Verwenden Sie die JS, die Sie bereits erstellt haben, um eine App zu erstellen)

und einige kostenlose Tools: Visual Studio Community, Azure Test und Cross-Browser-Test-Tools für Mac, Linux oder Windows.

und einige Philosophie…

Um zu schließen, möchte ich nur klar sagen, dass JavaScript nicht C# oder c ist. Es hat seine eigene Philosophie. Wenn Sie ein C- oder C -# -entwickler sind und die volle Kraft von JavaScript wirklich annehmen möchten, kann ich Ihnen am besten geben: Versuchen Sie nicht, Ihre Sprache in JavaScript zu replizieren. Es gibt keine beste oder schlimmste Sprache. Nur verschiedene Philosophien!

Dieser Artikel ist Teil der Web Dev Tech -Serie von Microsoft. Wir freuen uns, Projekt Spartan und seinen neuen Rendering -Engine mit Ihnen zu teilen. Holen Sie sich kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac-, iOS-, Android- oder Windows -Gerät bei Modern.ie.

häufig gestellte Fragen (FAQs) zu JavaScript -Vererbung

Was ist der Unterschied zwischen klassischer und prototypischer Vererbung in JavaScript? Das klassische Vererbung, auch als Konstruktor -Vererbung bezeichnet, wird ein neues Objekt aus einer Klasse oder Konstruktorfunktion erstellt. Dies ähnelt der Funktionsweise der Erbschaft in Sprachen wie Java oder c. Das prototypische Vererbung ist andererseits einzigartig für JavaScript. Dazu gehört es, ein neues Objekt zu erstellen, das Eigenschaften von einem vorhandenen Objekt erbt. Dies erfolgt anhand der Methode von Object.create () oder durch Festlegen des Prototyps des neuen Objekts auf das vorhandene Objekt. Der Hauptunterschied zwischen beiden besteht darin, dass die klassische Vererbung Klassen und Konstruktorfunktionen verwendet, während die prototypische Vererbung Objekte verwendet. Konzept in der JavaScript -Erbschaft. Wenn auf ein Objekt auf eine Eigenschaft oder Methode zugegriffen wird, überprüft JavaScript zuerst, ob dieses Objekt über diese Eigenschaft oder diese Methode verfügt. Wenn dies nicht der Fall ist, überprüft JavaScript den Prototyp des Objekts. Dieser Prozess setzt die Prototypkette fort, bis die Eigenschaft oder Methode gefunden oder das Ende der Kette erreicht ist (was normalerweise der integrierte Objektprototyp ist). Dieser Mechanismus ermöglicht es Objekten, Eigenschaften und Methoden aus ihren Prototypen zu erben und die Wiederverwendung und Vererbung von Code in JavaScript zu ermöglichen. Das Schlüsselwort in JavaScript wird im Kontext von Klassen verwendet, um Funktionen auf dem übergeordneten Objekt aufzurufen. Mit anderen Worten, mit „Super“ können Sie auf die übergeordnete Klasse eines Objekts auf Funktionen zugreifen und aufrufen, sodass Sie die Methoden der Elternklasse wiederverwenden können. Dies ist besonders nützlich im Konstruktor einer Unterklasse, wo Sie den Konstruktor der übergeordneten Klasse aufrufen möchten. ist einfach. Sie definieren einfach eine Methode mit demselben Namen in der untergeordneten Klasse oder im Objekt. Wenn diese Methode auf eine Instanz der untergeordneten Klasse oder des Objekts aufgerufen wird, wird die im Kind definierte Version anstelle der im Elternteil verwendet. Auf diese Weise können Sie das Verhalten ererbter Methoden anpassen oder erweitern. Wird verwendet, um ein Objekt zu erstellen und zu initialisieren. Im Kontext der Vererbung wird die Konstruktorfunktion der übergeordneten Klasse häufig im Konstruktor der Kinderklasse unter Verwendung des Schlüsselworts "Super" aufgerufen. Dies ermöglicht es der Kinderklasse, die Eigenschaften und Methoden der übergeordneten Klasse zu erben.

Wie funktioniert die Erbschaft mit JavaScript-ES6-Klassen? Das Schlüsselwort "Klasse" wird verwendet, um eine Klasse zu definieren, und das Schlüsselwort "Erweitert" wird verwendet, um eine Unterklasse zu erstellen, die von einer übergeordneten Klasse erbt. Das Schlüsselwort "Super" wird im Konstruktor der Unterklasse verwendet, um den Konstruktor der übergeordneten Klasse aufzurufen. wobei ein Objekt oder eine Klasse von mehr als einem übergeordneten erben kann. Es ist jedoch möglich, mehrere Vererbung mit Mixins zu simulieren. Ein Mixin ist eine Technik, bei der ein Objekt oder eine Klasse Eigenschaften und Methoden aus mehreren Quellen „mischen“ kann. Auf diese Weise können Sie die Funktionalität mehrerer Objekte oder Klassen zu einem kombinieren. Code in JavaScript. In der Vererbung erbt ein Objekt oder eine Klasse Eigenschaften und Methoden aus einem übergeordneten Objekt oder einer Klasse. In der Zusammensetzung besteht andererseits ein Objekt aus anderen Objekten, und die Funktionalität wird an diese Komponentenobjekte delegiert. Während die Vererbung um eine "IS-A" -Be Beziehung geht (eine Unterklasse ist eine Art der übergeordneten Klasse), handelt es sich bei der Zusammensetzung um eine "HAS-A" -Be Beziehung (ein Objekt hat andere Objekte).

Wie kann ich ich Verwenden Sie die Vererbung mit JavaScript -Funktionen? Dies geschieht durch Definieren einer Konstruktorfunktion, mit der neue Objekte erstellt werden. Die Eigenschaft "Prototyp" der Konstruktorfunktion ist ein Objekt, von dem alle Instanzen der Funktion erben werden. Durch Hinzufügen von Eigenschaften und Methoden zu diesem Prototypobjekt können Sie alle Instanzen der Funktion zur Verfügung stellen. Die Verwirrung zwischen der Prototypkette und der Konstruktorkette. Wenn eine Methode auf ein Objekt aufgerufen wird, sucht JavaScript die Prototypkette, nicht die Konstruktorkette. Eine weitere Gefahr besteht darin, den übergeordneten Konstruktor im Kinderkonstruktor aufzurufen, was zu unerwarteten Ergebnissen führen kann. Da JavaScript eine prototypische Vererbung verwendet, ist es schließlich möglich, den Prototyp versehentlich zu ändern, wenn Sie eine Instanz ändern wollten.

Das obige ist der detaillierte Inhalt vonEinfache Vererbung mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!