Prototypische Vererbung in JavaScript verstehen: Ein Leitfaden für Anfänger

JavaScript ist eine leistungsstarke, dynamische Sprache mit einem objektorientierten Programmierparadigma (OOP). Im Gegensatz zu vielen anderen OOP-Sprachen (wie Java oder C) verwendet JavaScript keine klassische Vererbung. Stattdessen wird eine prototypische Vererbung eingesetzt, die sowohl flexibel als auch einzigartig ist.

In diesem Blog tauchen wir tief in das Konzept der prototypischen Vererbung ein, erkunden, wie es funktioniert, und schauen uns praktische Beispiele an, um seine Leistungsfähigkeit besser zu verstehen.

Was ist prototypische Vererbung?

Prototypische Vererbung ermöglicht es JavaScript-Objekten, Eigenschaften und Methoden über eine Prototypenkette gemeinsam zu nutzen. Jedes JavaScript-Objekt verfügt über einen internen Link zu einem anderen Objekt, das als Prototyp bezeichnet wird. Wenn eine Eigenschaft oder Methode nicht auf dem Objekt selbst gefunden wird, sucht JavaScript in der Prototypenkette danach.

Dieser Mechanismus ermöglicht es Objekten, Verhalten von anderen Objekten zu „erben“, was ihn zu einem Eckpfeiler der objektorientierten Funktionen von JavaScript macht.

Schlüsselbegriffe

1.Prototyp:
Das Objekt, von dem ein anderes Objekt Eigenschaften erbt.

2.Proto:
Der interne Verweis (oder Link) auf den Prototyp eines Objekts.

3.Object.prototype:
Der Prototyp der obersten Ebene, von dem alle JavaScript-Objekte indirekt erben.

4.Prototypenkette:
Die Hierarchie der Prototypen, die JavaScript durchläuft, um eine Eigenschaft oder Methode zu finden.

Wie funktioniert prototypische Vererbung?

Hier ist ein Beispiel, um die prototypische Vererbung in Aktion zu veranschaulichen:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

Erklärung

1. Das Hundeobjekt erbt mithilfe der Object.create()-Methode Eigenschaften und Methoden vom Tierobjekt.
2. Wenn auf dog.eats zugegriffen wird, prüft JavaScript zunächst, ob die eats-Eigenschaft direkt auf dog vorhanden ist. Wenn nicht, sucht es nach der Eigenschaft im Tierprototyp.

Prototypen erstellen

Verwendung der Object.create()-Methode

Object.create() ist die einfachste Möglichkeit, eine prototypische Vererbung einzurichten.

const vehicle = {
  wheels: 4,
  drive() {
    console.log("Vehicle drives");
  },
};

const car = Object.create(vehicle);
console.log(car.wheels); // 4
car.drive(); // "Vehicle drives"

Konstruktorfunktionen verwenden

Bevor ES6-Klassen eingeführt wurden, waren Konstruktorfunktionen die primäre Möglichkeit, Objekte mit Vererbung zu erstellen.

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

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

const john = new Person("John");
john.greet(); // "Hello, my name is John"

Hier richtet der Person-Konstruktor den Prototyp mithilfe von Person.prototype ein. Über new Person() erstellte Objekte erben die in Person.prototype definierten Methoden.

Verwenden von ES6-Klassen

Mit ES6 wurde die Klassensyntax eingeführt, die die Vererbung intuitiver macht und gleichzeitig die Prototypenkette unter der Haube nutzt.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // "Buddy barks"

Auch wenn dies wie eine klassische Vererbung aussieht, basiert es dennoch auf der prototypischen Vererbung von JavaScript.

Prototypenkette in Aktion

Lassen Sie uns visualisieren, wie die Prototypenkette funktioniert:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

Prototypenkette:

• Untergeordnetes Objekt: sayHi()
• Übergeordnetes Objekt (Prototyp): Greet()
• Object.prototype (Basisprototyp): Methoden wie toString()

Wenn eine Methode oder Eigenschaft in keinem dieser Elemente gefunden wird, gibt JavaScript undefiniert zurück.

Vorteile der prototypischen Vererbung

1.Speichereffizienz:
Gemeinsam genutzte Methoden und Eigenschaften werden im Prototyp gespeichert und nicht zwischen Instanzen dupliziert.

2.Dynamische Vererbung:
Sie können den Prototyp zur Laufzeit ändern und alle erbenden Objekte werden die Änderung widerspiegeln.

3.Flexible Struktur:
Objekte können direkt von anderen Objekten erben, ohne dass starre Klassenhierarchien erforderlich sind.

Einschränkungen

1.Prototyp-Kettenleistung:
Lange Prototypenketten können die Suche nach Eigenschaften verlangsamen.

2.Verwirrung für Anfänger:
Das Verständnis von Proto, Prototyp und Object.create() kann überwältigend sein.

3.Mangel an privaten Feldern:
Vor ES6 war es schwierig, private Eigenschaften mithilfe von Prototypen zu implementieren.

Fazit

Prototypische Vererbung ist ein Eckpfeiler des OOP-Modells von JavaScript und bietet Flexibilität und dynamisches Verhalten. Unabhängig davon, ob Sie Object.create(), Konstruktorfunktionen oder ES6-Klassen verwenden, ist das Verständnis der Prototypenkette der Schlüssel zum Schreiben von effektivem und effizientem JavaScript-Code.

Mit diesem Wissen können Sie jetzt fortgeschrittene Themen wie Mixins, Prototyp-Manipulation und den Unterschied zwischen klassischer und prototypischer Vererbung erkunden.

Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonPrototypische Vererbung in JavaScript verstehen: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!