Tauchen Sie tief in Prototypen ein: Das Rückgrat von JavaScript

Prototypen sind ein Kernkonzept in JavaScript und bilden die Grundlage seiner objektorientierten Programmierfunktionen (OOP). Während andere Sprachen Klassen als Grundlage für die Vererbung verwenden, verlässt sich JavaScript auf Prototypen. In diesem Artikel werden wir Prototypen eingehend untersuchen und herausfinden, wie sie Vererbung, Objektverhalten und mehr in JavaScript steuern.

---

Was sind Prototypen?

In JavaScript verfügt jedes Objekt über eine interne Eigenschaft namens [[Prototype]], die auf ein anderes Objekt verweist. Dies ist der Prototyp des Objekts und fungiert als Fallback-Mechanismus für Eigenschaften oder Methoden, die nicht direkt auf dem Objekt gefunden werden.

Prototypenkette

Die Prototypenkette besteht aus einer Reihe verknüpfter Prototypen. Wenn eine Eigenschaft oder Methode für ein Objekt nicht gefunden wird, durchsucht JavaScript die Kette, bis sie Null erreicht.

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

Hier hat das Kind keine Begrüßungsmethode, daher sucht JavaScript die Prototypkette zum Elternteil und findet sie dort.

---

Die Verwirrung zwischen __proto__ und Prototyp

JavaScript bietet zwei verschiedene Begriffe im Zusammenhang mit Prototypen, die verwirrend sein können:

1. __proto__:

   • Dies ist eine Accessor-Eigenschaft, die für alle Objekte verfügbar ist und auf den Prototyp des Objekts verweist.
   • Es ist eine Möglichkeit, auf den [[Prototyp]] eines Objekts zuzugreifen.

2. Prototyp:

   • Dies ist eine Eigenschaft, die nur für Funktionen (insbesondere Konstruktorfunktionen) verfügbar ist.
   • Es wird verwendet, um den Prototyp von Objekten zu definieren, die von dieser Funktion erstellt werden.

Beispiel:

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

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

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

---

Prototypenvererbung in Aktion

Die Vererbung von JavaScript basiert auf Prototypen, was bedeutet, dass Objekte direkt von anderen Objekten und nicht von Klassen erben.

Vererbung erstellen

const animal = {
  eat() {
    console.log("Eating...");
  }
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("Barking...");
};

dog.eat();  // Output: "Eating..."
dog.bark(); // Output: "Barking..."

Das Hundeobjekt erbt die Eat-Methode vom Tierobjekt.

---

Verwenden von Object.create für eine saubere Vererbung

Die Object.create-Methode erstellt ein neues Objekt mit einem angegebenen Prototyp. Es ist eine sauberere und intuitivere Möglichkeit, die Vererbung einzurichten.

Beispiel:

const person = {
  introduce() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

const student = Object.create(person);
student.name = "John";
student.introduce();  // Output: "Hi, I'm John"

---

Erweiterung integrierter Prototypen

Obwohl die Erweiterung integrierter Prototypen wie Array oder Object möglich ist, wird davon im Allgemeinen abgeraten, da dies zu Konflikten führen kann.

Beispiel:

Array.prototype.last = function () {
  return this[this.length - 1];
};

console.log([1, 2, 3].last());  // Output: 3

Warum es vermeiden?

• Kompatibilitätsprobleme: Andere Bibliotheken stützen sich möglicherweise auf Standardprototypen.
• Wartung: Ihre Änderungen könnten vorhandenen Code beschädigen.

---

Prototypen vs. Klassen

Mit ES6 führte JavaScript die Klassensyntax ein und sorgte so für ein vertrauteres OOP-Erlebnis. Unter der Haube verwenden Klassen jedoch immer noch Prototypen.

Beispiel:

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

Auch bei Klasse erfolgt die Vererbung prototypbasiert.

---

Der Leistungswinkel

Prototypbasierte Vererbung ist speichereffizienter, da Methoden von Instanzen gemeinsam genutzt und nicht dupliziert werden.

Beispiel:

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

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

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

Hier wird der Antrieb nicht für jedes Auto dupliziert; Stattdessen verwenden beide Instanzen dieselbe Methode.

---

Wichtige Erkenntnisse

1. Prototypen ermöglichen Vererbung: Objekte erben von anderen Objekten über ihren Prototyp.
2. Prototypkette: JavaScript löst Eigenschaften und Methoden auf, indem es die Prototypenkette durchläuft.
3. Object.create: Eine saubere Möglichkeit, die Vererbung einzurichten.
4. Vermeiden Sie die Erweiterung integrierter Prototypen: Dies kann zu unerwartetem Verhalten und Konflikten führen.
5. Klassen verwenden Prototypen: ES6-Klassen bieten syntaktischen Zucker, verlassen sich aber immer noch auf Prototypen unter der Haube.

Das Verständnis von Prototypen ist für die Beherrschung von JavaScript unerlässlich. Während ES6-Klassen die objektorientierte Programmierung in JavaScript zugänglicher gemacht haben, bleibt das Prototypsystem der Kern der Sprache. Indem Sie tief in Prototypen eintauchen, erschließen Sie die Möglichkeit, effizienten, skalierbaren und wartbaren Code zu schreiben.

Das obige ist der detaillierte Inhalt vonTauchen Sie tief in Prototypen ein: Das Rückgrat von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!