JavaScript Native Prototypes

Native Prototypen erkunden

Native Prototypen in JavaScript sind die Objekte, die eingebaute Konstruktoren wie Array, Object, String, Number und Function verwenden, um Methoden und Eigenschaften mit jedem von ihnen erstellten Wert zu teilen. Wenn Sie [1, 2, 3].map(...) oder "hi".toUpperCase() aufrufen, befindet sich die aufgerufene Methode nicht auf dem Array oder dem String selbst – sie lebt auf Array.prototype oder String.prototype und wird durch das Traversieren der Prototypenkette gefunden.

Diese Seite erklärt, wo diese Prototypen in der Kette sitzen, wie man sie untersucht, wie man ihre Methoden für Objekte borgt, die keine echten Arrays sind, und warum die dauerhafte Erweiterung der Prototypen nicht empfohlen wird. Wenn Sie neu darin sind, wie die Kette selbst funktioniert, lesen Sie zuerst Prototypale Vererbung.

Die Rolle nativer Prototypen

Native Prototypen sind zentral für JavaScript: Sie sind der Grund, warum jeder Literalwert mit nützlichen Methoden vorbeladen ist, ohne dass Sie etwas definieren müssen. Wenn Sie verstehen, wie sie in die Prototypenkette passen, können Sie Fehlermeldungen verstehen, eingebaute Methoden an unerwarteten Stellen wiederverwenden und subtile Fehler vermeiden.

Object.prototype: die Wurzel der Kette

Fast jedes Objekt, das Sie erstellen, erbt letztlich von Object.prototype, das sich an der Spitze der Kette befindet. Dort kommen Methoden wie toString, hasOwnProperty und valueOf her. Wenn eine Suche auf einem Objekt und auf jedem dazwischenliegenden Prototypen scheitert, endet die Kette bei Object.prototype, und das nächste Glied ist null.

Array-, Function- und Number-Prototypen

Eingebaute Typen schichten ihren eigenen Prototypen über Object.prototype. Ein Array erbt beispielsweise von Array.prototype (das map, filter, push, … bereitstellt), und Array.prototype erbt wiederum von Object.prototype. Dasselbe Muster gilt für Funktionen und Zahlen.

Methoden borgen mit call und apply

Da native Methoden auf Prototypen leben, können Sie sie borgen und mit call oder apply gegen jeden kompatiblen Wert ausführen. Das klassische Beispiel ist die Verwendung von Array.prototype-Methoden auf array-ähnlichen Objekten (wie arguments oder einem String), die diese Methoden nicht selbst besitzen.

Native Prototypen erweitern

Obwohl JavaScript die Erweiterung nativer Prototypen erlaubt, wird diese Praxis im globalen Gültigkeitsbereich aufgrund potenzieller Konflikte in größeren Codebasen oder mit Drittanbieter-Skripten generell abgeraten. Es gibt mehrere konkrete Gründe, dies zu vermeiden:

• Namenskollisionen. Wenn zwei Skripte eine Methode mit demselben Namen hinzufügen (oder eine zukünftige ECMAScript-Version diesen Namen mit abweichendem Verhalten standardisiert), überschreibt eine die andere stillschweigend.
• Aufzählbarkeit. Eine mit einfacher Zuweisung hinzugefügte Methode ist aufzählbar, sodass sie in for...in-Schleifen über jedes Objekt dieses Typs auftaucht, sofern sie nicht mit hasOwnProperty abgesichert wird – eine häufige Fehlerquelle.
• Globale Nebeneffekte. Die Änderung betrifft jeden Wert dieses Typs im gesamten Programm, einschließlich Code, den Sie nicht selbst geschrieben haben.

Der folgende Codeausschnitt zeigt die for...in-Falle. Eine normale Zuweisung taucht in der Schleife auf; die Verwendung von Object.defineProperty, um die Methode nicht aufzählbar zu machen, hingegen nicht.

Das Verstehen dieser Fähigkeit ist dennoch wertvoll, um potenzielle Probleme zu erkennen, Polyfills zu lesen und fortgeschrittene Muster in kontrollierten Umgebungen zu erkunden.

Praktische Beispiele für die Arbeit mit nativen Prototypen

Arrays mit Array.prototype manipulieren

Betrachten Sie die Leistungsfähigkeit von Array.prototype, das Methoden wie map, filter und reduce bietet. Diese Methoden liefern elegante Lösungen zum Transformieren und Verarbeiten von in Arrays gespeicherten Daten. Wir können neue Methoden hinzufügen, indem wir Array.prototype manipulieren.

In diesem Beispiel definieren wir eine neue Methode mapToSquare auf dem Prototypen, die die eingebaute map-Methode verwendet, um das Quadrat jeder Zahl zurückzugeben.

Strings mit String.prototype erweitern

String.prototype ist ein weiteres reichhaltiges Repertoire an Methoden wie toLowerCase, toUpperCase und includes, die String-Manipulations- und Abfrageoperationen erleichtern.

In diesem Beispiel definieren wir removeSpace auf dem Prototypen und verwenden split, filter und join, um Leerzeichen zu entfernen.

Benutzerdefinierte Erweiterungen nativer Prototypen

Obwohl Vorsicht geboten ist, kann das Hinzufügen benutzerdefinierter Methoden zu nativen Prototypen die Flexibilität von JavaScript veranschaulichen. Hier sehen Sie, wie Sie Array.prototype um eine Methode erweitern könnten, die die Summe der Array-Elemente berechnet:

Diese benutzerdefinierte Methode sum fügt dem Array-Prototypen eine neue Dimension hinzu und veranschaulicht sowohl das Potenzial als auch die Risiken der Erweiterung nativer Prototypen.

Best Practices für die Verwendung nativer Prototypen

Trotz der unbestreitbaren Leistungsfähigkeit nativer Prototypen gibt es einige Best Practices, um sicherzustellen, dass Ihr Code robust und konfliktfrei bleibt:

• Native Prototypen nicht erweitern: Vermeiden Sie es, wenn nicht unbedingt notwendig, eingebaute Prototypen zu modifizieren, um unerwartetes Verhalten in Ihrem Code oder in Drittanbieter-Bibliotheken zu verhindern.
• Object.defineProperty für sicherere Erweiterungen verwenden: Wenn Sie Methoden hinzufügen müssen, verwenden Sie Object.defineProperty, um sie nicht aufzählbar zu machen. Dadurch werden Ihre benutzerdefinierten Eigenschaften nicht von for...in-Schleifen erfasst und Namenskonflikte werden reduziert.
• Polyfills mit Bedacht einsetzen: Wenn Sie Polyfills verwenden, um fehlende Funktionen in älteren Browsern nachzurüsten, stellen Sie sicher, dass sie die Existenz der Methode prüfen, bevor sie sie dem Prototypen hinzufügen.
• Moderne JavaScript-Funktionen nutzen: Mit der Weiterentwicklung von JavaScript können viele Aufgaben, die früher die Erweiterung nativer Prototypen erforderten, nun mit neuen Sprachkonstrukten wie Klassen und Modulen erledigt werden.

Fazit

Native Prototypen sind der Mechanismus hinter jeder eingebauten Methode, die Sie täglich verwenden: Sie befinden sich in der Prototypenkette, mit Object.prototype an der Wurzel, und ermöglichen es Werten wie Arrays, Funktionen und Zahlen, Verhalten zu teilen. Zu wissen, wie man sie mit Object.getPrototypeOf untersucht, ihre Methoden mit call und apply borgt und den Drang widersteht, sie global zu erweitern, macht Ihren Code sowohl leistungsfähiger als auch vorhersehbarer.

Um tiefer einzutauchen, lesen Sie Prototypale Vererbung für den Aufbau der Kette sowie Prototyp-Methoden und Objekte ohne __proto__ für die moderne Object.create / Object.getPrototypeOf API.

Übungen