Klassen in JavaScript

Vor der Erweiterung der Syntax konnte eine Klasse in JavaScript beispielsweise wie folgt erzeugt werden:

Hier dient die Funktion function Dog(Name) {...}als Konstruktor. Beim erzeugen eines Objekts der Klasse Dog werden mit Hilfe des Konstruktors die Propertys gesetzt. In diesem Fall wird lediglich die übergebene Property name gesetzt, es könnten beliebige weitere Properties gesetzt werden, auch solche, die nicht übergeben wurden.

Die Methode bark() wird an die sogenannte Prototype Chain gebunden. Was genau diese ist und wie sie funktioniert, dazu später mehr.

Dieser Konstruktor kann dann wie eine Klasse verwendet werden:

Wenn wir die erzeugten Objekte mit einem console.log("snoopy", snoopy); inspizieren, sehen wir, wie sie aufgebaut sind:

Dem Objekt wurde die Property name mit dem Wert “Snoopy” zugewiesen. Außerdem wurde die Funktion bark() zur Prototype Chain hinzugefügt. Beim Aufruf der Funktion wird nun zuerst beim instanziierten Objekt nach einer Implementierung der Funktion gesucht. Hier also zunächst unter snoopy.prototype. Findet sich hier kein Eintrag, wird auf der nächst höheren Ebene weiter nach einer Implementierung gesucht. In unserem Falle also auf der Ebene des Konstruktors Dog Dog.prototype. Zuletzt wird in JavaScript immer auf der höchsten Ebene gesucht, unter Object.prototype.

Wie bereits erwähnt ist es dank ECMAScript 6 nun möglich, Klassen wesentlich einfacher zu erzeugen. Das oben verwendete Beispiel der Klasse Dog würde wie folgt aussehen:

Diese Syntax erinnert schon sehr an eine klassenbasierte Objektorientierung und dürfte gerade Java Programmierern bekannt vorkommen. Im Vergleich zur Konstruktion einer Klasse mit Prototypen fällt auf, dass a) für den Konstruktor das Schlüsselwort constructor() verwendet wird und b) die Funktion bark() nun direkt an die Prototype Chain gebunden werden können.

constructor() die Funktion wird bei der Erzeugung eines neuen Objektes aufgerufen. Die Funktion ist also exakt die selbe wie die Funktion des Konstruktors bei Klassen mit Prototypen.

bark() obwohl nicht explizit angegeben, wird die Funktion an die Prototype Chain gebunden und steht später bei den instanziierten Objekten zur Verfügung.

Achtung: anhand der Syntax könnte man vermuten, dass es sich bei der Klasse um ein Objekt-Literal handelt und könnte demnach die Properties mit Komma abtrennen. Dem ist nicht so!

Inspizieren wir nun erneut die erzeugten Objekte mit einem console.log("snoopy", snoopy);, sehen wir, dass sie sehr ähnlich aufgebaut sind:

Auch hier wurde dem Objekt die Property name mit dem Wert “Snoopy” zugewiesen und die Funktion bark() zur Prototype Chain hinzugefügt. Die Verwendung des Keywords class führt also im Endeffekt zum selben Objekt als Ergebnis wie die bisherige Konstruktion mit Prototypen.

Die gängigen Browser unterstützen die class Syntax in der Regel alle seit spätestens 2016.

Chrome: seit Version 49 Firefox: seit Version 45 Edge: seit Version 12 Safari: seit Version 9 Opera: seit Version 36

Die einzige Ausnahme bildet der Android Chrome Browser — also die mobile Version. Hier wird die Syntax erst seit Mai 2017 und der Version 67 unterstützt.

Wer mehr über Klassen in ECMAScript 6 lesen möchte, findet hier weitere Informationen:

Related posts:

Since the start of social media, journalists, bloggers, content creators, etc. have all been posting their pieces online. This all began to go off the rails when the strategy known as “clickbaiting”…

It has been quite a few years we’ve broken the cookie cutter career molds with bespoke paths to success. Even the definition of success has changed. Many of us live in naive or duality of the world…

People often use the word “cynic”, for someone bitter, distrustful, and pessimistic. However, in ancient Greece, cynicism was an important school of thought that promoted an anti-materialistic way of…