Menu

JavaScript static: Klassenmethoden & Properties

Wie statische Methoden und Properties in JavaScript-Klassen funktionieren – wann du sie brauchst, wie sich this verhält und welches Factory-Pattern dahintersteckt.

Statische Member gehören zur Klasse, nicht zur Instanz

Die meisten Methoden, die du in einer Klasse schreibst, arbeiten auf einer konkreten Instanz – auf einem bestimmten user, einem bestimmten circle. Bei statischen Methoden in JavaScript ist das anders: Sie gehören zur Klasse selbst. Aufgerufen werden sie direkt über den Klassennamen, nicht über eine Instanz.

index.js
Output
Click Run to see the output here.

double lebt an MathUtils selbst, nicht an den Instanzen davon. Eine Instanz zu erzeugen hilft auch nichts — m.double ist undefined. Das ist genau das Gegenteil von normalen Methoden: Die hängen an den Instanzen (genauer gesagt am Prototype) und sind aus Sicht der Klasse selbst unsichtbar.

Das passende Mental Model: Das class-Keyword erzeugt zwei Dinge gleichzeitig — einen Satz Instanzmethoden (den new MathUtils() nutzt) und einen Satz statischer Methoden (die man direkt über MathUtils aufruft). Mit dem static-Keyword entscheidest du, in welchen der beiden Töpfe ein Member wandert.

Der Klassiker: Static Factory Methoden

Der häufigste Grund, eine static Methode zu schreiben, ist ein alternativer Konstruktor. Der eigentliche constructor nimmt die Argumente, die er eben nimmt — aber oft willst du ein Objekt auch auf andere Arten bauen: aus JSON, aus einer Datenbankzeile, aus einer URL.

index.js
Output
Click Run to see the output here.

fromJSON verwendet keinen User – es erzeugt einen. Und genau das ist der klassische Anwendungsfall für eine statische Methode. Alternativ könnte man eine freistehende parseUser-Funktion schreiben, aber wenn man sie direkt an die Klasse hängt, bleibt verwandtes Verhalten beisammen und die Absicht ist an der Aufrufstelle sofort klar.

Statische Properties

Du kannst auch Daten direkt an die Klasse selbst hängen:

index.js
Output
Click Run to see the output here.

Circle.PI ist über alle Kreis-Instanzen hinweg geteilt – es ist eine Konstante auf der Klasse und wird nicht in jede Instanz kopiert. Innerhalb von Instanzmethoden greifst du über den Klassennamen darauf zu (Circle.PI), nicht über this.

Statische Eigenschaften (Static Properties) sind praktisch für Konfigurationswerte, gemeinsam genutzte Caches, Zähler und Konstanten auf Klassenebene.

this in einer statischen Methode ist die Klasse selbst

In einer normalen Methode verweist this auf die Instanz. In einer static Methode zeigt this dagegen auf die Klasse:

index.js
Output
Click Run to see the output here.

this.count innerhalb von increment bezieht sich auf Counter.count. Das wirkt am Anfang vielleicht etwas seltsam, ist aber genau der Mechanismus, der die Vererbung statischer Methoden erst möglich macht – this verweist auf die Klasse, über die du die Methode aufgerufen hast, und nicht auf die Klasse, in der sie ursprünglich definiert wurde.

Static-Methoden und Vererbung in JavaScript

Statische Methoden werden an Subklassen vererbt. Und weil this auf die aufrufende Klasse zeigt, liefern Factory-Methoden automatisch die passende Subklasse zurück:

index.js
Output
Click Run to see the output here.

Animal.create verwendet new this(name). Wenn du Dog.create("Rex") aufrufst, ist this gleich Dog, und new this(name) erzeugt entsprechend ein Dog-Objekt. Würdest du stattdessen new Animal(name) schreiben, käme immer ein Animal heraus – das gesamte Muster wäre hinüber. Genau deshalb zeigt this in statischen Methoden auf die Klasse selbst.

Statische Methode vs. Instanzmethode im direkten Vergleich

Schauen wir uns dieselbe Logik einmal in beiden Varianten an:

index.js
Output
Click Run to see the output here.

Beide Varianten rechnen dasselbe. Die Instanzmethode greift auf this.celsius zu, während die statische Methode ihren Wert als Argument bekommt. Nimm die Instanzmethode, wenn die Operation „etwas ist, das dieses Objekt tut", und die statische Methode, wenn es „etwas ist, das die Klasse aus gegebenen Eingaben berechnen kann".

Static Blocks zur Initialisierung

Manchmal reicht ein einzelner Ausdruck nicht aus, um eine statische Eigenschaft zu initialisieren – etwa wenn du eine Schleife, eine Bedingung oder mehrere voneinander abhängige Werte brauchst. Genau dafür gibt es Static Blocks in JavaScript:

index.js
Output
Click Run to see the output here.

Ein static { ... }-Block wird genau einmal ausgeführt – nämlich dann, wenn die Klasse definiert wird. Innerhalb des Blocks verweist this auf die Klasse selbst. Ideal ist das für mehrstufige Initialisierungen; geht es nur um eine einzige Zuweisung, ist ein schlichtes statisches Feld übersichtlicher.

Private statische Methoden und Felder

Auch statische Felder lassen sich privat machen – einfach mit dem #-Präfix. Zugriff gibt es dann ausschließlich aus dem Inneren der Klasse:

index.js
Output
Click Run to see the output here.

#nextId ist fest innerhalb der Klasse eingeschlossen. Code von außen kann zwar IdGenerator.next() aufrufen, aber den Zähler weder auslesen noch zurücksetzen. Private Felder bekommen gleich ihre eigene Seite – aber es lohnt sich zu wissen, dass die Kombination aus static und # funktioniert.

Wann du besser nicht zu static greifst

Statische Methoden eignen sich prima, um Hilfsfunktionen zu bündeln – das heißt aber nicht, dass jedes Utility zu einer Klasse werden sollte. Wenn du eine Datei voller unabhängiger Funktionen hast, exportiere einfach die Funktionen. Pack sie nicht nur deshalb in eine Klasse mit lauter statischen Methoden, um einen Namensraum zu schaffen. Genau dafür gibt es Module, und die erledigen den Job sauberer.

Greif zu static, wenn:

  • Die Funktion wirklich zur Klasse gehört (Factory, Konverter, Validator für genau diesen Typ).
  • Du einen Zustand brauchst, der sich alle Instanzen der Klasse teilen.
  • Eine Unterklasse das Verhalten überschreiben oder erben können soll.

Ansonsten ist eine schlichte Funktion das einfachere Werkzeug.

Als Nächstes: Private Felder

Du hast #nextId bereits kurz gesehen – das ist die Syntax für private Felder in JavaScript. Sie funktioniert sowohl bei Instanz- als auch bei statischen Membern und ist der moderne Weg, Implementierungsdetails innerhalb einer Klasse zu verbergen. Darum geht's im nächsten Kapitel.

Häufig gestellte Fragen

Was ist eine statische Methode in JavaScript?

Eine statische Methode gehört zur Klasse selbst und nicht zu deren Instanzen. Du deklarierst sie mit dem Schlüsselwort static und rufst sie direkt an der Klasse auf: MyClass.doThing(). Über this.doThing() an einer Instanz kommst du nicht dran – nur die Klasse kennt die Methode.

Wann nehme ich eine statische Methode statt einer Instanzmethode?

Immer dann, wenn die Funktion logisch zur Klasse gehört, aber keine konkrete Instanz lesen oder verändern muss. Typische Fälle: Factory-Methoden wie User.fromJSON(...), Utility-Helfer à la Math.max oder Konstanten, bei denen die Klasse nur als Namespace dient. Sobald this auf eine Instanz zeigen soll, gehört die Methode an die Instanz.

Können statische Methoden auf Instanz-Properties zugreifen?

Nicht direkt. In einer statischen Methode zeigt this auf die Klasse, nicht auf eine Instanz – this.name liest also eine statische Property und kein Instanzfeld. Wenn du Instanzdaten brauchst, übergib die Instanz einfach als Argument: static summarize(user) { return user.name; }.

Werden statische Methoden in JavaScript vererbt?

Ja. Erbt eine Subklasse von einer Elternklasse, stehen deren statische Methoden auch an der Subklasse zur Verfügung. Innerhalb der Methode verweist this auf die Klasse, an der du sie tatsächlich aufgerufen hast – genau das lässt statische Factory-Methoden auch bei Subklassen sauber funktionieren.

Lerne mit Coddy zu programmieren

LOS GEHT'S