JavaScript-Prototyp (Prototype-Objekt)

In JavaScript ist der Prototyp ein sehr wichtiges Konzept, das Objekten einen Mechanismus für Vererbung und gemeinsam genutzte Eigenschaften bietet. Jedes JavaScript-Objekt hat ein zugehöriges Prototyp-Objekt. Über das Prototyp-Objekt können Eigenschaften und Methoden gemeinsam genutzt werden, wodurch der Speicherverbrauch reduziert wird.

Alle JavaScript-Objekte erben Eigenschaften und Methoden von einem Prototyp (Prototype-Objekt).

  • Prototypist ein Objekt, das als Vorlage oder Blaupause für andere Objekte dient.
  • Wenn ein Objekt versucht, auf eine Eigenschaft oder Methode zuzugreifen, und diese nicht auf dem Objekt selbst gefunden wird, durchsucht JavaScript die Prototypkette, bis es die entsprechende Eigenschaft oder Methode findet oder das Ende der Prototypkette erreichtnullund dort aufhört.

Die __proto__-Eigenschaft von Objekten

Jedes JavaScript-Objekt (außer null) hat automatisch eine versteckte Eigenschaft __proto__, die auf das Prototypobjekt des Objekts verweist. Dieses __proto__ ist der Schlüssel zur Implementierung von Vererbung:

let obj = {};
console.log(obj.__proto__); // 输出: [object Object], 即 obj 的原型是 Object.prototype

Konstruktor und Prototyp

In den vorherigen Kapiteln haben wir gelernt, wie man den Objektkonstruktor verwendet:

Beispiel

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green");

Selbst ausprobieren »

Wir wissen auch, dass man einem Objekt, das bereits einen Konstruktor hat, keine neuen Eigenschaften hinzufügen kann:

Beispiel

Person.nationality = "English";

Selbst ausprobieren »

Um eine neue Eigenschaft hinzuzufügen, musst du sie in der Konstruktorfunktion hinzufügen:

Beispiel

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; this.nationality = "English"; }

Selbst ausprobieren »

Wenn du ein Objekt mit einer Konstruktorfunktion erstellst, wird dieprototype-Eigenschaft des Konstruktors zum Prototyp aller Instanzobjekte, die von dieser Konstruktorfunktion erstellt werden.

Beispiel

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

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

let alice = new Person("Alice");
alice.sayHello(); // Ausgabe: Hello, my name is Alice

In diesem Beispiel ist Person.prototype der Prototyp des alice-Objekts, sodass alice auf die sayHello-Methode zugreifen kann.

Prototypenkette

In JavaScript erreichen Objekte die Vererbung über die Prototypenkette. Wenn ein Objekt versucht, auf eine Eigenschaft oder Methode zuzugreifen, prüft JavaScript zuerst, ob das Objekt selbst diese Eigenschaft oder Methode besitzt. Wenn nicht, wird die Prototypenkette durchsucht.

let obj = {};
console.log(obj.toString()); // 输出: [object Object]
// 这个 `toString` 方法实际上是从 `Object.prototype` 继承过来的

Im obigen Beispiel definiert das Objekt obj keine toString-Methode, daher sucht JavaScript entlang der Prototypenkette und findet die Methode schließlich in Object.prototype.

Den Prototyp ändern

Sie können den Prototyp eines Objekts dynamisch ändern, was sich auf alle Objekte auswirken kann, die auf Basis dieses Prototyps erstellt wurden:

Beispiel

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

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

let bob = new Person("Bob");
bob.sayHello(); // Ausgabe: Hallo, mein Name ist Bob

// Prototyp ändern
Person.prototype.sayGoodbye = function() {
    console.log("Tschüss von " + this.name);
};

bob.sayGoodbye(); // Ausgabe: Tschüss von Bob

In diesem Beispiel haben wir eine neue Methode sayGoodbye zu Person.prototype hinzugefügt, und das Objekt bob kann sofort auf diese neue Methode zugreifen.

Object.create-Methode

Die Methode Object.create ermöglicht es dir, ein neues Objekt zu erstellen und seinen Prototyp auf ein angegebenes Objekt festzulegen.

Beispiel

let personPrototype = {
    sayHello: Funktion() {
        console.log("Hello, my name is " + this.name);
    }
};

let alice = Object.create(personPrototype);
alice.name = "Alice";
alice.sayHello(); // Ausgabe: Hello, my name is Alice

In diesem Beispiel ist der Prototyp von alice personPrototype, sodass das alice-Objekt auf die Methode sayHello zugreifen kann.

Prototypenvererbung

Alle JavaScript-Objekte erben Eigenschaften und Methoden von einem Prototyp (Prototypobjekt):

  • DateObjekte vonDate.prototypeerben.
  • ArrayObjekte vonArray.prototypeerben.
  • PersonObjekte vonPerson.prototypeerben.

Alle Objekte in JavaScript sind Instanzen von Object, das sich an der Spitze der Prototypkette befindet.

JavaScript-Objekte haben eine Kette, die auf ein Prototypobjekt verweist. Wenn versucht wird, auf eine Eigenschaft eines Objekts zuzugreifen, wird nicht nur das Objekt selbst durchsucht, sondern auch der Prototyp des Objekts und der Prototyp dieses Prototyps und so weiter, Schicht für Schicht nach oben, bis eine Eigenschaft mit übereinstimmendem Namen gefunden wird oder das Ende der Prototypkette erreicht ist.

DateObjekte,ArrayObjekte, undPersonObjekte ausObject.prototypeerben.

Hinzufügen von Eigenschaften und Methoden

Manchmal möchten wir allen vorhandenen Objekten neue Eigenschaften oder Methoden hinzufügen.

Darüber hinaus möchten wir manchmal Eigenschaften oder Methoden zum Konstruktor eines Objekts hinzufügen.

Mit der prototype-Eigenschaft können Sie neue Eigenschaften zum Konstruktor eines Objekts hinzufügen:

Beispiel

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.nationality = "English";

Selbst ausprobieren »

Natürlich können wir auch die prototype-Eigenschaft verwenden, um neue Methoden zum Konstruktor eines Objekts hinzuzufügen:

Beispiel

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.name = function() { return this.firstName + " " + this.lastName; };

Selbst ausprobieren »
Andere Erweiterungen