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!

Ein Kommentar zu “ES2015 – Teil 3: Klassen

  1. Kira-Bianca Hinz

    Normalerweise beginne ich bei einer Kritik immer mit dem Positiven, was ja auch richtig ist. Doch leider gibt es für mich bei den Klassen in Javascript nichts Positives. Hier wurde mit vorhandenen Sprachmitteln (allesamt problemoritentierter Programmierstil) ein objektorientierter Programmierstil integriert, was einer einfachen Additionsaufgabe gleicht: Ich habe 3 Äpfel und du hast 5 Birnen. Wieviele Gurken haben wir beide zusammen?

    In den meisten Programmiersprachen (zumindest die, die ich kenne – und das sind einige) ist die Syntax von Klassen ziemlich identisch. Aber Javascript hält sich sehr wenig an diese Konvention, weshalb hier schon einmal 1 Minuspunkt zu vergeben ist.
    Und eine KLASSE auch als FUNCTION deklarieren zu können ist der zweitgrößte Schrott; der größte Schrott ist, dass sie intern sogar als Funktion gehandelt wird. Dafür 3 Minuspunkt.
    Drittens lassen sich keine statischen Klassen vereinbaren; bzw. dieses nur mit einem Programmierstil erreicht werden kann, der jedem guten Stil widerspricht, völlig unübersichtlich ist und irgendwie an die Programmiersprache BASIC aus den 1980ern erinnert. Was nützen mir statische Methoden, wenn ich darin keinen Zugriff auf Klassenvariablen habe? Klar kann Javascript diese Variablen nicht zur Verfügung stellen, weil sie ja auf Grund des Handlings nur in einer Instanz (also dem erzeugten Objekt durch new Klasse()) existieren. Das ganze Handlich von Klassen in Javascript ist Schrott – nochmals 3 Minuspunkt.

    Fazit: Es wurde versucht, durch Klassen und anderen Neuerungen, Javascript zu einer Programmiersprache zu machen, die auch objektorientiert arbeiten kann. Dieser Versuch ist gänzlich ins Höschen gegangen!
    Bei dem Saldo von 7 Minuspunkten heißt das, Finger weg von Javascript und OOP (also auch den Klassen-Funktionen), denn hier sind syntaktische und logische Fehler quasi vorprogrammiert. Und Javascript hat wie jede andere Script-Sprache auch den Nachteil, dass Fehler erst auffallen, wenn die entsprechende Stelle im Code angesprungen wird.

Schreibe einen Kommentar

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

*