Code-Erklärung des Prototyps und der Prototypenkette in JavaScript

Der Inhalt dieses Artikels befasst sich mit der Code-Erklärung des Prototyps und der Prototypenkette in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

Für viele Front-End-Entwickler sind Prototypen und Prototypketten in JavaScript ein Punkt der Verwirrung, daher dokumentiert dieser Artikel mein Verständnis dieses Aspekts und wird ihn in Zukunft mit einem tieferen Verständnis aktualisieren.

Objekt

Wenn Sie Prototypen und Prototypketten verstehen möchten, müssen Sie zunächst verstehen, was ein Objekt ist? Objektorientierte Programmierung (OOP) ist das aktuelle Mainstream-Programmierparadigma, das verschiedene komplexe Beziehungen in mehrere Objekte abstrahiert und diese dann aufteilt und mit ihnen zusammenarbeitet, um die Simulation der realen Umgebung abzuschließen. Daher ist ein Objekt eine Abstraktion eines einzelnen physischen Objekts, und das durch die Abstraktion erhaltene Objekt ist ein Container mit Eigenschaften und Methoden. Wenn wir beispielsweise einen Schüler in ein Schülerobjekt abstrahieren, können Attribute verwendet werden, um die Klasse des Schülers aufzuzeichnen (z. B. das erste Jahr der Mittelschule, das erste Jahr der Oberschule usw.), und Methoden können verwendet werden werden verwendet, um ein bestimmtes Verhalten des Schülers darzustellen (z. B. Lernen, Spielen usw.).

Konstruktor, Instanzobjekt und Vererbung

Wenn wir objektorientierte Programmierung verwenden möchten, besteht die erste Aufgabe darin, Objekte zu generieren. In JavaScript wird der Konstruktor speziell zum Generieren von Instanzobjekten verwendet. Ein Konstruktor kann mehrere Instanzobjekte generieren, die alle dieselbe Struktur haben.

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

Besonderes Augenmerk sollte auf Folgendes gelegt werden:

• Im obigen Code ist Student der Konstruktor, aber um ihn von gewöhnlichen Funktionen zu unterscheiden, wird der erste Buchstabe von verwendet Der Name muss großgeschrieben werden.

• Das Schlüsselwort this wird innerhalb des Funktionskörpers verwendet, der die zu generierende Objektinstanz darstellt.

• Beim Generieren von Objekten müssen Sie den neuen Befehl verwenden. Nur new generiert ein neues Instanzobjekt.

Zusätzlich zur Verwendung des neuen Befehls zum Generieren neuer Instanzobjekte können wir diese auch über Object.create() erstellen. Diese Methode eignet sich für Situationen, in denen wir keine Möglichkeit haben, darauf zuzugreifen Der Konstruktor kann jedoch nur auf ein vorhandenes Objekt angewendet werden.

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

Im obigen Code verwendet die Methode Object.create das Objekt student1 als Prototyp und generiert das Objekt student2. student2 erbt alle Eigenschaften und Methoden von student1.

Prototypobjekt (Prototyp)

Lassen Sie uns zunächst verstehen, warum es ein Prototypobjekt (Prototyp) gibt.

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false

Wie Sie dem obigen Code entnehmen können, verfügen die über den Konstruktor instanziierten Objekte zwar über eine Begrüßungsmethode, da diese Methode für jedes Instanzobjekt selbst generiert wird, dh jede Instanz wird neu generiert Begrüßungsmethode wird erstellt. Tatsächlich sind die Begrüßungsmethoden jedoch dieselben, und es besteht keine Notwendigkeit, sie mehrmals zu generieren und Ressourcen zu verschwenden. Daher wurde das JavaScript-Prototypobjekt geboren. JavaScript schreibt vor, dass jede Funktion über ein Prototypattribut verfügt, das auf ein Objekt verweist.

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

Im obigen Code ist das Prototypattribut des Konstruktors Animal das Prototypobjekt der Instanzobjekte cat1 und cat2. Fügen Sie dem Prototypobjekt ein Farbattribut hinzu. Daher haben alle Instanzobjekte dieses Attribut gemeinsam.

Die Eigenschaften des Prototypobjekts sind keine Eigenschaften des Instanzobjekts selbst. Solange Sie das Prototypobjekt ändern, werden die Änderungen sofort in allen Instanzobjekten widergespiegelt.

Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"

Wenn das Instanzobjekt selbst eine bestimmte Eigenschaft oder Methode hat, wird im Prototypobjekt nicht nach der Eigenschaft oder Methode gesucht.

cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

Prototypenkette

JavaScript schreibt vor, dass alle Objekte ihre eigenen Prototypobjekte (Prototyp) haben. Einerseits kann jedes Objekt als Prototyp für andere Objekte dienen. Da das Prototypobjekt andererseits auch ein Objekt ist, verfügt es auch über einen eigenen Prototyp. Daher wird eine „Prototypenkette“ gebildet: Objekt zu Prototyp und dann zum Prototyp des Prototyps...

Wenn man es Schicht für Schicht zurückverfolgt, können die Prototypen aller Objekte schließlich auf das Objekt zurückgeführt werden .prototyp, also die Prototypeigenschaft des Objektkonstruktors. Mit anderen Worten, alle Objekte erben die Eigenschaften von Object.prototype. Der Prototyp von Object.prototype ist null. null verfügt weder über Eigenschaften oder Methoden noch über einen eigenen Prototyp. Daher ist das Ende der Prototypenkette null.

Das obige ist der detaillierte Inhalt vonCode-Erklärung des Prototyps und der Prototypenkette in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!