Heim > Web-Frontend > js-Tutorial > Die Prototypenkette in JavaScript: Vererbung und Objektsuche verstehen

Die Prototypenkette in JavaScript: Vererbung und Objektsuche verstehen

Mary-Kate Olsen
Freigeben: 2024-12-22 20:49:11
Original
685 Leute haben es durchsucht

The Prototype Chain in JavaScript: Understanding Inheritance and Object Lookup

Die Prototypenkette in JavaScript

Die Prototypenkette ist ein grundlegendes Konzept im Vererbungsmodell von JavaScript. Es ermöglicht Objekten, Eigenschaften und Methoden von anderen Objekten zu erben, und ist der Schlüsselmechanismus für die Funktionsweise der Vererbung in JavaScript.

So funktioniert die Prototypenkette

Wenn Sie ein Objekt in JavaScript erstellen, wird es mit einem anderen Objekt verknüpft, das als dessen Prototyp fungiert. Jedes Objekt verfügt über eine versteckte interne Eigenschaft, [[Prototype]], die auf das Prototypobjekt verweist.

Wenn Sie auf eine Eigenschaft oder Methode eines Objekts zugreifen, prüft JavaScript zunächst, ob die Eigenschaft für dieses Objekt vorhanden ist. Wenn nicht, sucht JavaScript in der Kette nach dem Prototyp des Objekts, dann nach dem Prototyp dieses Prototyps usw., bis es Object.prototype (die Wurzel der Prototypenkette) erreicht. Wenn die Eigenschaft oder Methode auf keiner Ebene der Kette gefunden wird, gibt JavaScript undefiniert zurück.

Beispiel einer Prototypenkette

// Constructor function for Animal
function Animal(name) {
    this.name = name;
}

// Adding a method to Animal's prototype
Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

// Constructor function for Dog
function Dog(name) {
    Animal.call(this, name); // Inherit properties from Animal
}

// Set up the prototype chain so Dog inherits from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Reset the constructor reference

// Create an instance of Dog
const dog = new Dog("Buddy");
dog.speak();  // Output: "Buddy makes a noise."
Nach dem Login kopieren
Nach dem Login kopieren

In diesem Beispiel:

  • Das Dog-Objekt erbt vom Animal-Prototyp über die Prototypenkette.
  • Wenn Sie dog.speak() aufrufen, sucht JavaScript zunächst nach der Speak-Methode für das Hundeobjekt. Wenn es dort nicht gefunden wird, prüft es Dog.prototype und schließlich Animal.prototype.
  • Da Speak in Animal.prototype vorhanden ist, wird es gefunden und ausgeführt.

Die Prototypenkette und Object.prototype

Jedes Objekt in JavaScript erbt letztendlich von Object.prototype, dem obersten Prototypobjekt in der Prototypenkette. Dies bedeutet, dass alle Objekte, einschließlich Instanzen integrierter Objekte wie Arrays, Funktionen und benutzerdefinierter Objekte, Zugriff auf die in Object.prototype definierten Methoden und Eigenschaften haben.

const obj = {};
console.log(obj.toString()); // Output: "[object Object]"
// The toString method is inherited from Object.prototype
Nach dem Login kopieren

Prototypketten-Suchprozess

  1. Zuerst sucht JavaScript nach der Eigenschaft oder Methode am Objekt selbst.
  2. Als nächstes: Wenn die Eigenschaft nicht gefunden wird, prüft JavaScript den Prototyp des Objekts.
  3. Dann überprüft es den Prototyp des Prototyps und fährt in der Kette fort, bis es Object.prototype erreicht.
  4. Wenn die Eigenschaft nicht einmal in Object.prototype gefunden wird, wird undefiniert zurückgegeben.

Visualisierung der Prototypenkette

Betrachten Sie das folgende Beispiel:

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

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

const john = new Person("John");

console.log(john.sayHello());  // Output: "Hello, John"
console.log(john.toString());  // Output: "[object Object]"
Nach dem Login kopieren

In diesem Fall sieht die Prototypkette für John so aus:

// Constructor function for Animal
function Animal(name) {
    this.name = name;
}

// Adding a method to Animal's prototype
Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

// Constructor function for Dog
function Dog(name) {
    Animal.call(this, name); // Inherit properties from Animal
}

// Set up the prototype chain so Dog inherits from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Reset the constructor reference

// Create an instance of Dog
const dog = new Dog("Buddy");
dog.speak();  // Output: "Buddy makes a noise."
Nach dem Login kopieren
Nach dem Login kopieren
  • john verfügt nicht direkt über die toString-Methode, daher sucht JavaScript nach Person.prototype, und wenn es dort nicht gefunden wird, prüft es Object.prototype.
  • Wenn es schließlich nicht in Object.prototype gefunden wird, wird undefiniert zurückgegeben.

Abschluss

Die Prototypenkette in JavaScript ermöglicht leistungsstarke Vererbungsfunktionen, die es Objekten ermöglichen, Eigenschaften und Methoden von anderen Objekten zu erben. Um JavaScript zu beherrschen und effizienteren, objektorientierten Code zu erstellen, ist es wichtig zu verstehen, wie die Prototypenkette funktioniert.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonDie Prototypenkette in JavaScript: Vererbung und Objektsuche verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage