Objektprototypen

Versuchen Sie im Konsolenfenster des Browsers, ein Objektliteral zu erstellen:

const myObject = {
  city: "Madrid",
  greet() {
    console.log(`Greetings from ${this.city}`);
  },
};

myObject.greet(); // Greetings from Madrid

Dies ist ein Objekt mit einer Dateneigenschaft, city, und einer Methode, greet(). Wenn Sie den Namen des Objekts gefolgt von einem Punkt in die Konsole eingeben, wie myObject., wird die Konsole eine Liste aller für dieses Objekt verfügbaren Eigenschaften anzeigen. Sie werden sehen, dass neben city und greet viele andere Eigenschaften verfügbar sind!

__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
__proto__
city
constructor
greet
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocaleString
toString
valueOf

Versuchen Sie, auf eine davon zuzugreifen:

myObject.toString(); // "[object Object]"

Es funktioniert (auch wenn nicht offensichtlich ist, was toString() tut).

Was sind diese zusätzlichen Eigenschaften, und woher kommen sie?

Jedes Objekt in JavaScript hat eine eingebaute Eigenschaft, die als sein Prototyp bezeichnet wird. Der Prototyp selbst ist ein Objekt, daher hat auch der Prototyp einen eigenen Prototyp, wodurch eine sogenannte Prototypkette entsteht. Die Kette endet, wenn wir einen Prototyp erreichen, der null als seinen eigenen Prototyp hat.

Wenn Sie versuchen, auf eine Eigenschaft eines Objekts zuzugreifen: Wenn die Eigenschaft im Objekt selbst nicht gefunden werden kann, wird der Prototyp nach der Eigenschaft durchsucht. Wenn die Eigenschaft immer noch nicht gefunden werden kann, wird der Prototyp des Prototyps durchsucht, und so weiter, bis die Eigenschaft entweder gefunden wird oder das Ende der Kette erreicht ist, in welchem Fall undefined zurückgegeben wird.

Wenn wir also myObject.toString() aufrufen, geht der Browser folgendermaßen vor:

• sucht toString in myObject
• kann es dort nicht finden, also wird im Prototypobjekt von myObject nach toString gesucht
• findet es dort und ruft es auf.

Was ist der Prototyp von myObject? Um das herauszufinden, können wir die Funktion Object.getPrototypeOf() verwenden:

Object.getPrototypeOf(myObject); // Object { }

Dies ist ein Objekt namens Object.prototype, und es ist der grundlegendste Prototyp, den alle Objekte standardmäßig haben. Der Prototyp von Object.prototype ist null, daher befindet es sich am Ende der Prototypkette:

Der Prototyp eines Objekts ist nicht immer Object.prototype. Versuchen Sie dies:

const myDate = new Date();
let object = myDate;

do {
  object = Object.getPrototypeOf(object);
  console.log(object);
} while (object);

// Date.prototype
// Object { }
// null

Dieser Code erstellt ein Date-Objekt und geht dann die Prototypkette hoch und protokolliert die Prototypen. Es zeigt uns, dass der Prototyp von myDate ein Date.prototype-Objekt ist und der Prototyp davon Object.prototype ist.

Tatsächlich, wenn Sie bekannte Methoden wie myDate2.getTime() aufrufen, rufen Sie eine Methode auf, die auf Date.prototype definiert ist.

Was passiert, wenn Sie eine Eigenschaft in einem Objekt definieren, während eine Eigenschaft mit demselben Namen im Prototyp des Objekts definiert ist? Schauen wir uns das an:

const myDate = new Date(1995, 11, 17);

console.log(myDate.getTime()); // 819129600000

myDate.getTime = function () {
  console.log("something else!");
};

myDate.getTime(); // 'something else!'

Dies sollte vorhersehbar sein, angesichts der Beschreibung der Prototypkette. Wenn wir getTime() aufrufen, sucht der Browser zuerst in myDate nach einer Eigenschaft mit diesem Namen und überprüft den Prototyp erst, wenn myDate sie nicht definiert. Wenn wir also getTime() zu myDate hinzufügen, wird die Version in myDate aufgerufen.

Dies wird als "Abschattung" der Eigenschaft bezeichnet.

Es gibt verschiedene Möglichkeiten, einen Prototyp eines Objekts in JavaScript festzulegen. Hier werden wir zwei beschreiben: Object.create() und Konstruktoren.

Die Methode Object.create() erstellt ein neues Objekt und ermöglicht Ihnen, ein Objekt anzugeben, das als Prototyp des neuen Objekts verwendet wird.

Hier ist ein Beispiel:

const personPrototype = {
  greet() {
    console.log("hello!");
  },
};

const carl = Object.create(personPrototype);
carl.greet(); // hello!

Hier erstellen wir ein Objekt personPrototype, das eine Methode greet() hat. Danach verwenden wir Object.create(), um ein neues Objekt mit personPrototype als seinen Prototyp zu erstellen. Jetzt können wir greet() für das neue Objekt aufrufen, und der Prototyp liefert seine Implementierung.

In JavaScript haben alle Funktionen eine Eigenschaft namens prototype. Wenn Sie eine Funktion als Konstruktor aufrufen, wird diese Eigenschaft als Prototyp des neu konstruierten Objekts festgelegt (konventionell, in der Eigenschaft namens __proto__).

Wenn wir also den prototype eines Konstruktors festlegen, können wir sicherstellen, dass alle mit diesem Konstruktor erstellten Objekte diesen Prototyp erhalten:

const personPrototype = {
  greet() {
    console.log(`hello, my name is ${this.name}!`);
  },
};

function Person(name) {
  this.name = name;
}

Object.assign(Person.prototype, personPrototype);
// or
// Person.prototype.greet = personPrototype.greet;

Hier erstellen wir:

• ein Objekt personPrototype, das eine Methode greet() hat
• eine Konstruktorfunktion Person(), die den Namen der zu erstellenden Person initialisiert.

Wir legen dann die in personPrototype definierten Methoden auf der prototype-Eigenschaft der Person-Funktion mithilfe von Object.assign fest.

Nach diesem Code erhalten alle mit Person() erstellten Objekte Person.prototype als ihren Prototyp, der die greet-Methode automatisch enthält.

const reuben = new Person("Reuben");
reuben.greet(); // hello, my name is Reuben!

Dies erklärt auch, warum wir zuvor sagten, dass der Prototyp von myDate Date.prototype genannt wird: es ist die prototype-Eigenschaft des Date-Konstruktors.

Die Objekte, die wir mit dem oben genannten Person-Konstruktor erstellen, haben zwei Eigenschaften:

• eine name-Eigenschaft, die im Konstruktor festgelegt ist und daher direkt auf Person-Objekten erscheint
• eine greet()-Methode, die im Prototyp festgelegt ist.

Es ist üblich, dieses Muster zu sehen, bei dem Methoden auf dem Prototyp definiert sind, aber Dateneigenschaften im Konstruktor. Das liegt daran, dass Methoden normalerweise für jedes erstellte Objekt gleich sind, während wir oft möchten, dass jedes Objekt seinen eigenen Wert für seine Dateneigenschaften hat (genau wie hier, wo jede Person einen anderen Namen hat).

Eigenschaften, die direkt im Objekt definiert sind, wie name hier, werden als eigene Eigenschaften bezeichnet, und Sie können überprüfen, ob eine Eigenschaft eine eigene Eigenschaft ist, indem Sie die statische Methode Object.hasOwn() verwenden:

const irma = new Person("Irma");

console.log(Object.hasOwn(irma, "name")); // true
console.log(Object.hasOwn(irma, "greet")); // false

Prototypen sind ein leistungsstarkes und sehr flexibles Merkmal von JavaScript, das es ermöglicht, Code wiederzuverwenden und Objekte zu kombinieren.

Insbesondere unterstützen sie eine Version der Vererbung. Vererbung ist ein Merkmal von objektorientierten Programmiersprachen, das es Programmierern ermöglicht, die Idee auszudrücken, dass einige Objekte in einem System spezialisiertere Versionen anderer Objekte sind.

Wenn wir zum Beispiel eine Schule modellieren, könnten wir Professoren und Studenten haben: Sie sind beide Personen und haben daher einige gemeinsame Merkmale (zum Beispiel haben beide einen Namen), aber jeder könnte zusätzliche Merkmale haben (zum Beispiel haben Professoren ein Fach, das sie lehren) oder möglicherweise dieselbe Funktion auf unterschiedliche Weise implementieren. In einem OOP-System könnten wir sagen, dass Professoren und Studenten beide von Personen erben.

Sie können sehen, wie in JavaScript, wenn Professor- und Student-Objekte Person-Prototypen haben können, sie die gemeinsamen Eigenschaften erben können, während sie diese Eigenschaften hinzufügen und neu definieren, die unterschiedlich sein müssen.

Im nächsten Artikel werden wir die Vererbung zusammen mit den anderen Hauptmerkmalen der objektorientierten Programmiersprachen behandeln und sehen, wie JavaScript sie unterstützt.

Dieser Artikel hat JavaScript-Objektprototypen behandelt, einschließlich wie Prototypketten es Objekten ermöglichen, Eigenschaften voneinander zu erben, die Prototyp-Eigenschaft und wie sie verwendet werden kann, um Methoden zu Konstruktoren hinzuzufügen, und andere verwandte Themen.

Im nächsten Artikel werden wir die Konzepte hinter der objektorientierten Programmierung betrachten.

• Übersicht: Fortgeschrittene JavaScript-Objekte
• Weiter