ES2015 – Teil 3: Klassen

Und weiter geht es mit unseren ES2015 Neuerungen. Nach den Pfeilfunktionen von letzter Woche kommen wir dieses mal zur neuen Klassensyntax. Diese ändert funktionell gar nichts, ist aber sogenannter syntaktischer Zucker – was das bedeutet klären wir gleich als erstes im Artikel.

Was ist syntaktischer Zucker?

Im englischen sugar genannt bedeutet das ganz einfach, dass wir eine gewisse Funktionalität einfach mit einer neuen Syntax erreichen. Im Beispiel unserer Klassen gibt es diese Funktionalität schon mit hilfe von Funktionskonstruktoren was aber viele Programmierer – vor allem aus anderen Programmiersprachen – verwirrt hat.

Die neue class Syntax verändert dies ein wenig und gleicht es an andere Sprachen an – wodurch sich gerade PHP Programmierer gleich viel wohler fühlen dürften. Hinter den Kulissen laufen hier aber dann trotzdem dieselben Prozesse ab.

 

ES2015 Klassen

Nach dieser kleinen Einleitung nun aber zum eigentlichen Thema dieses Artikels: Die ES2015 class Syntax.

Ein simples Beispiel der Syntax. Falls du andere Programmiersprachen beherrscht solltest du dich wie zuhause fühlen. Das Schlüsselwort class mit nachfolgendem Klassennamen definiert erstmal die Klasse. Später kann diese dann über den Aufruf new Klassenname() instanziert werden.

 

 

Innerhalb der Klasse können wir dann auch direkt einen Konstruktor – in ES2015 mit dem vorbelegten Namen constructor definiert – anlegen. Die Parameter des Konstruktors können wie immer dann beim new Aufruf mit übergeben werden. Im Konstruktor werden dann die Attribute der Klasse mit dem Schlüsselwort this festgelegt. Auf diese können weitere später Methoden zugreifen.

Apropos Methoden – diese werden einfach mit einem Namen, einer Parameterliste und einem Codeblock definiert. Das Schlüsselwort function ist hier nicht nötig.

 

Vererbung

Auch die Vererbung hat ein zuckersüßes Update erhalten. Anstatt der umständlichen Verwendung über prototypes können wir die aus PHP bekannte extends Syntax verwenden.

Diese Klasse erweitert einfach das Beispiel von oben und fügt unserer Person Klasse noch eine Kindklasse hinzu (Wortspiel! ;-)). Ein paar Dinge gibt es dabei zu beachten:

  1. Eine Klasse kann von einer anderen einfach mit dem Schlüsselwort extends Klassenname erben.
  2. Die Elternklasse kann mit dem super Objekt angesprochen werden.
  3. Der Elternkonstruktor muss mit der super() Methode aufgerufen werden, bevor das this Schlüsselwort verwendet werden kann.

 

 

Statische Methoden in ES2015 Klassen

Neben den normalen Methoden gibt es noch die statische Variante. Diese Methoden beziehen sich auf eine Klasse selbst, nicht auf ein einzelnes Objekt (das bedeutet this ist hier auch nicht verfügbar!) und werden gern zum Beispiel für Hilfsfunktionalitäten eingesetzt.

Eine statische Methode wird einfach durch das Schlüsselwort static eingeleitet und kann dann über den Klassennamen aufgerufen werden – im Beispiel dann Child.isTeenager(john).

 

Besonderheiten

Eine Sache gibt es bei Klassen im Gegensatz zu Funktionen zu beachten: Sie werden nicht gehoisted! Das bedeutet eine Klasse muss im Code bereits definiert sein bevor sie verwendet wird, andernfalls wird ein ReferenceError geworfen!

 

Was hälst du von der neuen Syntax? Als PHP Programmierer ist mir die class Syntax natürlich deutlich lieber als die bisherige Variante. Lass uns deine Meinung gerne in den Kommentaren wissen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*