This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

Draft
This page is not complete.

JavaScript Klassen, eingeführt in ECMAScript 6, sind syntaktischer Zucker für das bestehende, auf Prototypen basierende, Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt kein neues OOP-Modell in die Sprache ein. JS Klassen ermöglichen es, mit klarer und verständlicher Syntax Objekte zu erstellen und Vererbung in Javascript zu realisieren.

Klassendefinition

Klassen sind eigentlich Funktionen. Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:

  • Klassenausdrücke und
  • Klassendeklarationen.

Klassendeklaration

Eine Möglichkeit, Klassen zu definieren ist eine Klassendeklaration. Diese wird eingeleitet durch das Schlüsselwort class, gefolgt vom Namen der Klasse (hier: "Polygon").

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

Ein wichtiger Unterschied zwischen Klassen- und Funktionsdeklarationen besteht im sogenannten hoisted. Funktionsdeklarationen werden an den Anfang des Definitionsbereichs "gehoben", für Klassen gilt dies nicht. Das heißt, um auf eine Klasse zuzugreifen, muss sie zuvor definiert worden sein, sonst führt dies zu einem ReferenceError:

var p = new Polygon(); // ReferenceError

class Polygon {}

Klassenausdruck

Ein Klassenausdruck ist eine weitere Möglichkeit eine Klasse zu definieren. Dabei ist es optional, hinter dem Schlüsselwort class einen Namen anzugeben. Sollte ein Name angegeben werden, so gilt dieser nur innerhalb des Klassenrumpfs.

// unnamed
var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Polygon = class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Klassenrumpf und Methodendefinitionen

Der Rumpf der Klasse ist innerhalb der beiden geschweiften Klammern {}. Hier werden die Eigenschaften der Klasse definiert, wie Konstruktoren oder Methoden.

"Strict mode"

Der Inhalt der Klassen Deklaration und des Klassen Ausdrucks werden im "strikten Modus" ausgeführt.

Konstruktor

Die Konstruktor Methode is eine spezielle Methode um Objekte zu erzeugen und zu initialisieren. Eine Klasse kann nur eine spezielle Methode mit dem Namen "constructor" haben. Sollte es in einer Klasse mehrere "constructor" Methoden geben, wird ein SyntaxError geworfen.

In der Konstruktor Methode kann man mit dem Schlüsselwort "super", den Konstruktor der Elternklasse aufrufen.

Prototype Methoden

Siehe auch Methoden Definitionen.

class Polygon {
  constructor(hoehe, breite) {
    this.hoehe = hoehe;
    this.breite = breite;
  }
  
  get flaeche() {
    return this.berechneFlaeche();
  }

  berechneFlaeche() {
    return this.hoehe * this.breite;
  }
}

const quadrat = new Polygon(10, 10);

console.log(quadrat.flaeche);

Statische Methoden

Das Schlüsselwort static definiert statische Methoden. Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in Applikationen statische Methoden für Hilffunktionen verwendet.

class Punkt {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static laenge(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}

const p1 = new Punkt(5, 5);
const p2 = new Punkt(10, 10);

console.log(Punkt.laenge(p1, p2));

Vererbung mittels extends

Das Schlüsselwort extends wird dafür verwendet, um Klassen Deklarationen und Klassen Ausdrücke zu erzeugen, die von einer andern Klasse ableitet.

class Tier{ 
  constructor(name) {
    this.name = name;
  }
  
  sprich() {
    console.log(this.name + ' macht ein Geräusch.');
  }
}

class Hund extends Tier{
  sprich() {
    console.log(this.name + ' bellt.');
  }
}

Man kann auch traditionelle Methoden-basieren Klassen erweitern:

function Tier(name) {
  this.name = name;  
}
Tier.prototype.sprich = function () {
  console.log(this.name + ' macht ein Geräusch.');
}

class Hund extends Tier {
  sprich() {
    super.sprich();
    console.log(this.name + ' bellt.');
  }
}

var d = new Hund('Wolfi');
d.sprich();

Species

Falls man zum Beispiel in einer selbst erzeugten Klasse MyArray den Konstruktor mit dem Konstruktor der Array Klasse überschreiben will, kann man dies mittels des species Musters erreichen.

Zum Beispiel, wenn man die map() Methode aufruft, wird der Default Konstruktor der Klasse aufgerufen. Will man das statt dessen der Konstruktor der Elternklasse benutzt wird, kann am das Symbol.species Symbol dafür verwenden:

class MyArray extends Array {
  // Überschreibt species mit dem Konstruktor der Array-Klasses
  static get [Symbol.species]() { return Array; }
}
var a = new MyArray(1,2,3);
var mapped = a.map(x => x * x);

console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

Elternklasse Methoden mit super aufrufen

Das Schlüsslewort super kann verwendet werden, um Methoden der Elternklassen aufzurufen

class Katze{
  constructor(name) {
    this.name = name;
  }

  sprich() {
    console.log(this.name + ' macht ein Geräusch.');
  }
}

class Loewe extends Katze {
  sprich() {
    super.sprich();
    console.log(this.name + ' brüllt.');
  }
}

Mix-ins

Abstrakte Subklassen oder mix-ins sind Vorlagen für Klassen. Eine ECMAScript Klasse kann nur von einer einzigen Klasse ableiten, damit ist mehrfach Vererbungen wie zum Beispiel von Helferklassen nicht möglich. Die gewünschte Funktionalität muss von der Elternklasse bereitgestellt werden.

Eine Funktion die als Input eine Elternklasse nimmt und als Output eine davon abgeleitete Subklasse ausgibt, kann verwendet werden, um mix-ins in ECMAScript zu erzeugen:

var RechnerMixin = Base => class extends Base {
  rechne() { }
};

var ZufallsGeneratorMixin = Base => class extends Base {
  generiere() { }
};

Eine Klasse die ein solche mix-in verwendet kann so erzeugt werden:

class Foo { }
class Bar extends RechnerMixin(ZufallsGeneratorMixin(Foo)) { }

Spezifikationen

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Class definitions' in dieser Spezifikation.
Standard Initial definition.

Browserkompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 42.0 Available in the Nightly channel only (since February 2015) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Nicht unterstützt Available in the Nightly channel only (since February 2015) ? ? ? 42.0

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: chiborg, jaller94, akumagamo, neutr0nis, LevitatingOrange
 Zuletzt aktualisiert von: chiborg,