Einfache JavaScript-Vererbung Was Sie wissen müssen

Viele meiner Freunde sind C # - oder C ++ - Entwickler. Sie sind es gewohnt, Vererbung in ihren Projekten zu verwenden, und wenn sie JavaScript erlernen oder entdecken wollen, lautet eine der ersten Fragen, die sie stellen: "Aber wie kann ich Vererbung mit JavaScript durchführen?"

Tatsächlich verwendet JavaScript einen anderen Ansatz als C # oder C ++, um eine objektorientierte Sprache zu erstellen. Es ist ein Prototyp-basiert Sprache. Das Konzept des Prototyping impliziert, dass Verhalten durch Klonen wiederverwendet werden kann bestehender Objekte, die als Prototyp dienen. Jedes Objekt in JavaScript hängt von einem Prototyp ab, der eine Reihe von Funktionen und Elementen 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 von OOP zu simulieren, z. B. Vererbung.

Vererbung implementieren

Schauen wir uns an, was wir mit JavaScript mit dieser Hierarchie erstellen wollen:

Zuallererst können wir schaffen Klasse a leicht. Da es keine expliziten Klassen gibt, können wir eine Reihe von Verhalten definieren (so eine Klasse), indem Sie einfach eine Funktion wie folgt erstellen:

var ClassA = function () this.name = "Klasse A"; 

Diese "Klasse" kann mit der Instanz von instanziiert werden Neu Stichwort:

var a = new ClassA (); ClassA.prototype.print = function () console.log (this.name); 

Und um es mit unserem Objekt zu benutzen:

Ein Druck();

Ziemlich einfach, richtig?

Das komplette Beispiel ist nur acht Zeilen lang:

var ClassA = function () this.name = "Klasse A";  ClassA.prototype.print = function () console.log (this.name);  var a = new ClassA (); Ein Druck();

Fügen wir nun ein Werkzeug hinzu, um eine "Vererbung" zwischen Klassen zu erstellen. Dieses Tool muss nur eine Sache tun: klonen Sie den Prototyp.

var inheritsFrom = Funktion (untergeordnetes Element, übergeordnetes Element) child.prototype = Object.create (übergeordnetes.Prototyp); ;

Genau hier passiert der Zauber! Durch das Klonen des Prototyps übertragen wir alle Mitglieder und Funktionen in die neue Klasse.

Wenn wir also eine zweite Klasse hinzufügen möchten, die der ersten untergeordnet ist, müssen wir nur diesen Code verwenden:

var ClassB = function () this.name = "Klasse B"; this.surname = "Ich bin das Kind";  vererbtFrom (ClassB, ClassA);

Dann weil Klasse b erbte die drucken Funktion von Klasse a, Der folgende Code funktioniert:

var b = new ClassB (); b.print ();

Und erzeugt die folgende Ausgabe:

Klasse b

Wir können das sogar überschreiben drucken Funktion für Klasse b:

ClassB.prototype.print = function () ClassA.prototype.print.call (this); console.log (this.surname); 

In diesem Fall sieht die erzeugte Ausgabe folgendermaßen aus:

Klasse B Ich bin das Kind

Der Trick hier ist anzurufen ClassA.prototyp um die Basis zu bekommen drucken Funktion. Dann danke dem Anruf Funktion können wir die Basisfunktion für das aktuelle Objekt aufrufen (diese).

Erstellen Klasse C ist jetzt offensichtlich:

var ClassC = function () this.name = "Klasse C"; this.surname = "Ich bin das Enkelkind";  vererbtFrom (ClassC, ClassB); ClassC.prototype.foo = function () // Machen Sie hier ein paar funky Sachen ... ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("Klingt so, das funktioniert!");  var c = new ClassC (); c.print ();

Und die Ausgabe ist:

Klasse C Ich bin das Enkelkind Klingt wie das funktioniert!

Weitere praktische Übungen mit JavaScript

Es mag Sie ein wenig überraschen, aber Microsoft bietet eine Reihe von kostenlosen Informationen zu vielen Open Source-JavaScript-Themen. Wir haben uns vorgenommen, mit Microsoft Edge viel mehr zu schaffen. Schauen Sie sich meine eigenen an:

• Einführung in WebGL 3D mit HTML5 und Babylon.JS
• Erstellen einer Einzelseitenanwendung mit ASP.NET und AngularJS
• Schneide Grafiken in HTML

Oder die Lernreihe unseres Teams:

• Praktische Tipps zur Leistung, um Ihr HTML / JavaScript schneller zu machen (eine siebteilige Serie vom responsiven Design über Gelegenheitsspiele bis hin zur Leistungsoptimierung)
• The Modern Web Platform Jump Start (Grundlagen von HTML, CSS und JS)
• Universelle Windows-App mit HTML und JavaScript entwickeln Jump Start (Verwenden Sie zum Erstellen einer App die bereits erstellte JS).

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

Und etwas Philosophie…

Zum Schluss möchte ich nur klarstellen, dass JavaScript nicht C # oder C ++ ist. Es hat etwas Eigenes Philosophie. Wenn Sie ein C ++ - oder C # -Entwickler sind und wirklich die volle Leistungsfähigkeit von JavaScript nutzen möchten, ist der beste Tipp, den ich Ihnen geben kann: Versuchen Sie nicht, Ihre Sprache in JavaScript zu replizieren. Es gibt keine beste oder schlechteste Sprache. Nur unterschiedliche Philosophien!

Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.

Lernen Sie JavaScript: Das komplette Handbuch

Wir haben ein umfassendes Handbuch zusammengestellt, mit dessen Hilfe Sie JavaScript erlernen können, egal ob Sie gerade erst als Webentwickler anfangen oder sich mit fortgeschrittenen Themen befassen möchten.