Viele meiner Freunde sind C#- oder C++-Entwickler und sind daran gewöhnt, in ihren Projekten mit Vererbung zu arbeiten. Wenn der eine oder die andere darüber nachdenkt, es auch mal mit JavaScript zu versuchen, ist eine der ersten Fragen: “Kann ich denn in JavaScript eigentlich auch die Vererbung nutzen?”
JavaScript benutzt einen anderen Ansatz als C# oder C++, um objektorientierte Programmiermuster zu ermöglichen: Es ist eine prototypenbasierte Sprache. Die Nutzung von Prototypen bedeutet, dass das Verhalten (Behaviors) von Objekten wiederverwendet werden kann, indem man bereits vorhandene Objekte klont (also nachbildet), die als Prototypen dienen. Jedes Objekt in JavaScript ist von einem Prototypen abhängig, der einen Satz von Funktionen und Attributen (Members) vorgibt, den das Objekt nutzen kann. Klassen gibt es nicht. Nur die Objekte. Und jedes Objekt kann dann als Prototyp für ein weiteres Objekt dienen.
Dieses Konzept ist außerordentlich flexibel und wir können damit OOP-Paradigmen, wie eben auch Vererbung, simulieren.
Vererbung umsetzen
Am besten, wir visualisieren erst einmal, was wir genau erreichen wollen – mithilfe einer Hierarchie:
Zunächst erzeugen wir ClassA, das geht leicht Weil es wie gesagt keine eindeutigen Klassen gibt, können wir eine Reihe von Behaviors festlegen (A class so…), indem wir einfach folgende Funktion erstellen:
var ClassA = function() {
this.name = „class A“;
}
Diese “Klasse” kann nun mit dem new-Keyword instanziiert werden:
var a = new ClassA();
ClassA.prototype.print = function() {
console.log(this.name);
}
Und sie wird unser Objekt nutzen:
a.print();
Eigentlich ganz einfach, oder?
Das gesamte Beispiel ist gerade mal acht Zeilen lang:
var ClassA = function() {
this.name = "class A";
}
ClassA.prototype.print = function() {
console.log(this.name);
}
var a = new ClassA();
a.print();
Jetzt werden wir ein Tool hinzufügen, mit dem wir eine Art Vererbung zwischen Klassen erzeugen können. Es hat nur eine Aufgabe – den Prototypen zu klonen:
var inheritsFrom = function (child, parent) { child.prototype = Object.create(parent.prototype); };
Wenn das nicht fast nach Zauberei aussieht! Mit dem Kopieren des Prototypen übertragen wir alle Attribute und Funktionen auf die neue Klasse.
Wenn wir also eine zweite Klasse als abgeleitete Klasse der ersten hinzufügen wollen, brauchen wir nichts weiter als diesen Code:
var ClassB = function() {
this.name = "class B";
this.surname = "I'm the child";
}
inheritsFrom(ClassB, ClassA);
Weil ClassB nun die print Funktion von ClassA geerbt hat, funktioniert dann auch der folgende Code:
var b = new ClassB();
b.print();
Und führt zu dem folgenden Ergebnis:
class B
Wir können die print-Funktion für ClassB aufheben:
ClassB.prototype.print = function() {
ClassA.prototype.print.call(this);
console.log(this.surname);
}
In diesem Fall erhalten wir dieses Resultat:
class B
I’m the child
Der Trick besteht darin, ClassA.prototype aufzurufen um die print-Basisfunktion zu erhalten. Und mithilfe der call-Funktion können wir dann die Basisfunktion des aktuellen Objekts (this) aufrufen. Wie wir ClassC erstellen ist nun offensichtlich:
var ClassC = function () {
this.name = "class C";
this.surname = "I'm the grandchild";
}
inheritsFrom(ClassC, ClassB);
ClassC.prototype.foo = function() {
// Do some funky stuff here...
}
ClassC.prototype.print = function () {
ClassB.prototype.print.call(this);
console.log("Sounds like this is working!");
}
var c = new ClassC();
c.print();
Und das kommt dabei heraus:
class C
I’m the grandchild
Das scheint doch zu funktionieren!
Noch mehr Tipps, Tricks und Hilfen rund um JavaScript
Es klingt vielleicht seltsam, aber Microsoft bietet eine ganze Reihe kostenloser Lehrangebote zu zahlreichen Open Source JavaScript-Themen an – und mit der anstehenden Veröffentlichung von Microsoft Edge werden wir in diesem Bereich noch sehr viel mehr tun. Auch von mir gibt es Tutorials:
- Introduction to WebGL 3D and HTML5 and Babylon.JS
- Building a Single Page Application with ASP.NET and AngularJS
- Cutting Edge Graphics in HTML
Außerdem haben wir noch die Schulungsreihe unseres Teams:
- Practical Performance Tips to Make your HTML/JavaScript Faster (a 7-part series from responsive design to casual games to performance optimization)
- The Modern Web Platform JumpStart (the fundamentals of HTML, CSS, and JS)
- Developing Universal Windows App with HTML and JavaScript JumpStart (use the JS you’ve already created to build an app)
Praktisch sind zudem die folgenden kostenlosen Tools: Visual Studio Community, Azure Trial, und Cross-Browser Testing Tools für Mac, Linux, oder Windows.
Und das noch mit auf den Weg…
Um es abschließend noch mal klar zu sagen: JavaScript ist nicht C# oder C++. Diese Skriptsprache hat ihre eigene Philosophie. Für alle C++- oder C#-Entwickler, die sich die ganze Leistung von JavaScript zu Eigen machen wollen, habe ich diesen wichtigen Tipp: Versucht nicht eure Lieblingssprache in JavaScript nachzubilden. Es gibt nicht die beste oder die schlechteste Sprache. Nur unterschiedliche Ansätze und Philosophien!
Dieser Artikel ist Teil der Web Dev Tech Series von Microsoft. Wir freuen uns, Microsoft Edge und seine neue EdgeHTML Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: dev.modern.IE.
