W3docs

JavaScript Eingebaute Klassen erweitern

JavaScript ist das Fundament moderner Webentwicklung und bietet eine vielseitige Sprache für dynamische und interaktive Webanwendungen.

Eingebaute Klassen wie Array, Map, Set und Error sind im Grunde reguläre Klassen, sodass man sie mit extends genau wie selbst geschriebene Klassen erweitern kann. Die Unterklasse erbt alle Methoden der übergeordneten Klasse und kann neue Methoden hinzufügen, das Verhalten überschreiben oder zusätzlichen Zustand speichern. Das ist ein sauberer Weg, um eine spezialisierte Sammlung zu erstellen (ein array, das sich selbst summieren kann, eine Map mit Standardwerten) oder einen domänenspezifischen Fehlertyp — ohne den globalen Prototype zu verändern, was die riskantere Alternative ist, die in JavaScript: Native Prototypes beschrieben wird.

Dieses Kapitel behandelt die grundlegende Syntax, wie eingebaute Methoden Instanzen Ihrer Unterklasse zurückgeben, wie Symbol.species dies steuert, die Erweiterung von Error für benutzerdefinierte Fehlertypen und die Einschränkungen, die man kennen sollte, bevor man zu dieser Technik greift. Wenn Sie neu bei extends und super sind, lesen Sie zuerst JavaScript: Class Inheritance.

Syntax und einfaches Beispiel

Die Syntax ist identisch mit der Erweiterung jeder anderen Klasse:

class CustomClass extends BuiltInClass {
  // New methods and properties to extend the built-in class
}

Wenn Ihre Unterklasse einen Konstruktor definiert, müssen Sie super() aufrufen, bevor Sie this verwenden. Damit kann die übergeordnete Klasse ihren internen Zustand und die nativen Strukturen korrekt initialisieren — bei Array und Map ist dieser interne Zustand entscheidend dafür, dass sie überhaupt funktionieren.

Erweitern wir die Array-Klasse mit einer Methode, die alle Elemente summiert:

javascript— editable

Die Instanz verhält sich wie ein vollständiges array — Indizierung, length, Iteration und jede Array-Methode funktionieren — zusätzlich zur hinzugefügten sum()-Methode.

⚠️ Hinweis: Beim Erweitern von Array sollte beachtet werden, dass sich die Eigenschaft length in JavaScript besonders verhält. In manchen Umgebungen synchronisiert sich length bei bestimmten nativen Methoden möglicherweise nicht automatisch mit der tatsächlichen Größe des Arrays. Testen Sie gründlich oder erwägen Sie Komposition, wenn eine präzise Längenverfolgung wichtig ist.

Eingebaute Methoden geben Instanzen Ihrer Unterklasse zurück

Das ist der Teil, der die Erweiterung von Array wirklich leistungsfähig macht: Methoden wie map, filter und slice, die ein neues array zurückgeben, liefern eine Instanz Ihrer Unterklasse, nicht ein einfaches Array. Das bedeutet, dass das neue array weiterhin Ihre benutzerdefinierten Methoden enthält.

javascript— editable

Intern entscheidet die Engine, welchen Konstruktor sie über einen speziellen statischen Getter namens Symbol.species verwendet. Standardmäßig gibt Symbol.species die Unterklasse selbst zurück, weshalb filter oben ein ExtendedArray erzeugt hat.

Den Rückgabetyp mit Symbol.species steuern

Manchmal möchte man das Gegenteil: Methoden wie map und filter sollen einfache arrays zurückgeben, während new ExtendedArray(...) weiterhin die Unterklasse liefert. Überschreiben Sie Symbol.species, um zurück auf die Basisklasse zu zeigen:

javascript— editable

Jetzt ist arr ein PowerArray mit Ihrer isEmpty()-Methode, aber filter gibt ein einfaches Array zurück, das diese Methode nicht mehr trägt. Verwenden Sie dies, wenn Ihre Unterklasse Zustand im Konstruktor hinzufügt, den abgeleitete arrays nicht erben sollen. Symbol.species wird auch von Map, Set, ArrayBuffer und Promise berücksichtigt.

Die String-Klasse erweitern

Die String-Klasse ist ein weiteres fundamentales eingebautes object, das mit zusätzlichen Hilfsmethoden zur String-Manipulation erweitert werden kann.

Eine Umkehrfunktion hinzufügen

javascript— editable

⚠️ Hinweis: Die Erweiterung von String wird generell nicht empfohlen, da JavaScript's Eigenheiten bei der Umwandlung von Primitiven in Objekte zu unerwartetem Verhalten bei nativen Methoden führen können. Für die String-Manipulation bevorzugen Sie Hilfsfunktionen oder Komposition gegenüber Vererbung.

Die Map-Klasse anpassen

Die Map-Klasse in JavaScript repräsentiert eine Sammlung von Schlüssel-Datenelementen und bietet eine fortschrittlichere und flexiblere Datenspeicherung im Vergleich zu Objekten. Die Erweiterung der Map-Klasse ermöglicht es uns, spezialisierteres Verhalten einzuführen.

Einen Standardwert implementieren

Map so erweitern, dass ein Standardwert zurückgegeben wird, wenn der Schlüssel nicht vorhanden ist. Beachten Sie, wie das überschreibende get super.get(key) aufruft, um die eigentliche Map-Suche zu erreichen:

javascript— editable

Die Error-Klasse erweitern

Eine häufige und praktische Anwendung dieser Funktion ist die Erstellung benutzerdefinierter Fehlertypen. Durch das Ableiten von Error erhält man einen benannten Fehler, der mit instanceof abgeglichen werden kann, während er weiterhin ein echtes Error ist (er trägt also eine message, einen stack und funktioniert mit try...catch).

javascript— editable

Das Setzen von this.name ist wichtig — es steuert, wie der Fehler ausgegeben wird, und ermöglicht die Unterscheidung des eigenen Fehlertyps von einem generischen. Eine ausführlichere Behandlung, einschließlich des Aufbaus einer Hierarchie von Fehlerklassen, finden Sie in JavaScript: Custom Errors, Extending Error.

Best Practices und Überlegungen

Das Erweitern eingebauter Klassen eröffnet viele Möglichkeiten, aber es ist wichtig, Best Practices einzuhalten, um Codewartbarkeit und Kompatibilität sicherzustellen.

  • Vorhandene Methoden nicht überschreiben: Das Erweitern eingebauter Klassen durch das Hinzufügen neuer Methoden ist im Allgemeinen sicher. Das Überschreiben vorhandener Methoden kann jedoch zu unvorhersehbarem Verhalten und Kompatibilitätsproblemen führen.
  • Nur bei spezifischem Bedarf verwenden: Erweitern Sie eingebaute Klassen nur dann, wenn es einen klaren Nutzen oder eine Notwendigkeit gibt. Vermeiden Sie unnötige Erweiterungen, die Ihre Codebasis verkomplizieren könnten.
  • Komposition oder Hilfsfunktionen bevorzugen: Im modernen JavaScript ist die Erweiterung eingebauter Klassen oft unnötig. Die Verwendung von Hilfsfunktionen oder Komposition liefert in der Regel sauberere und besser vorhersagbare Ergebnisse, ohne native Unterklassen-Interna zu verändern.
  • Erweiterungen klar dokumentieren: Stellen Sie sicher, dass alle Erweiterungen eingebauter Klassen in Ihrer Codebasis gut dokumentiert sind, um Verwirrung bei anderen Entwicklern zu vermeiden.

Statische Methoden werden ebenfalls vererbt

Wenn man eine eingebaute Klasse mit extends erweitert, erbt die Unterklasse auch die statischen Methoden der übergeordneten Klasse. So sind ExtendedArray.from(...) und ExtendedArray.isArray(...) verfügbar, und statische Factory-Methoden wie Array.from erzeugen Instanzen der Unterklasse. Dies spiegelt die normale Klassenvererbung wider — in JavaScript: Static Properties and Methods wird erläutert, wie statische Member vererbt werden.

Fazit

Das Erweitern eingebauter Klassen ist ein sauberer Weg, um fokussiertes Verhalten zu nativen Objekten hinzuzufügen — ein summierendes array, eine Map mit Standardwerten, ein benannter Fehler — ohne globale Prototypes zu verändern. Die wichtigste Erkenntnis ist, dass abgeleitete eingebaute Methoden standardmäßig Instanzen Ihrer Unterklasse zurückgeben und Symbol.species der Schalter zum Ändern dieses Verhaltens ist. Greifen Sie zur Vererbung, wenn eine echte „ist-ein"-Beziehung besteht; ansonsten bevorzugen Sie einfache Hilfsfunktionen oder Komposition.

Übungen

Übung
Welche Aussagen über das Erweitern eingebauter Klassen in JavaScript sind zutreffend?
Welche Aussagen über das Erweitern eingebauter Klassen in JavaScript sind zutreffend?
Was this page helpful?