Lernen wir JavaScript objektorientiert kennen

Lernen wir JavaScript objektorientiert kennen

JavaScript-Prototypenkette

Jedes Objekt hat einen Prototyp, der auf ein anderes Objekt verweist. Das andere Objekt hat wiederum seinen eigenen Prototyp. Die Kette aus Prototypen von Prototypen wird Prototypenkette genannt.

Bild-20210924092335152

Das Ende der Prototypenkette

Wenn eine Prototypenkette endlos ist, wird die Suche bei der Suche nach einer Eigenschaft, die in der Prototypenkette nicht vorhanden ist, fortgesetzt, was zu einer Endlosschleife führt. Dies ist offensichtlich nicht der Fall. Was ist also das Ende der Prototypenkette?

Objektprototyp

Top-Level-Prototyp

Schau dir den Code an~

// Die Methode zur Erstellung von obj-Literalen ähnelt new Object()
// Dann ist das Obj-Objekt eine Instanz von Object, d. h. obj.__proto__ === Object.prototype
var obj = {
  Name: "fzb",
};
// Was ist also obj.__proto__ oder Oject.prototype's __proto__? Die Antwort ist: null
console.log(obj.__proto__); // [Objekt: Null-Prototyp] {}
console.log(obj.__proto__.__proto__); // null

Besonderheiten von [Object: null prototype] {} :

1. Das Objekt hat eine Prototypeigenschaft, aber der Prototyp zeigt auf null , was bedeutet, dass es sich bereits um den Prototyp der obersten Ebene handelt.

2. Es gibt viele andere Methoden für dieses Objekt, aber sie sind nicht aufzählbar und können nicht angezeigt werden.

Erstellen Sie eine Speicherzuordnung des Objektobjekts

Bild-20210924094822274

Speicherdiagramm für das obige Beispiel

Bild-20210924095218150

Objekt ist die übergeordnete Klasse aller Klassen

Das Prototypobjekt am Anfang der Prototypkette ist das Prototypobjekt von Object

Beispiel:

Funktion Student(sno, Name) {
  dies.sno = sno;
  dieser.name = Name;
}
const stu = neuer Student(201801, "fzb");

console.log(stu); // Student { sno: 201801, name: 'fzb' }
konsole.log(stu.__proto__); // {}
console.log(stu.__proto__.__proto__); // [Objekt: Null-Prototyp] {}

console.log(Student.__proto__); // {}
/* ***************Der Kommentarinhalt wird später ausführlich erläutert***************
 * Warum nicht Student.__proto__ = [Objekt: null-Prototyp] {}
 * Weil Student.__proto__ = Function.prototype 
 * Function.prototype.__proto__ = Object.prototype = [Objekt: Null-Prototyp] {}
 * ***************Der Inhalt der Anmerkung wird später ausführlich erläutert***************
 */
console.log(Student.__proto__.__proto__); // [Objekt: null-Prototyp] {}

Speicherkarte:

Bild-20210924101359674

Prototypkette zur Erzielung von Vererbung

Durch Vererbung kann Code wiederverwendet werden, und Unterklassen können

Beispiel:

Funktion Person() {
  dieser.name = "fzb";
}

Person.prototype.running = Funktion () {
  console.log(dieser.name + "Läuft~");
};

Funktion Student(sno) {
  dies.sno = sno;
}
Student.prototype = neue Person();
// Nachdem Sie das gesamte Prototypobjekt neu geschrieben haben, konfigurieren Sie den Konstruktor neu
Objekt.defineProperty(Student.prototype, "Konstruktor", {
  konfigurierbar: true,
  aufzählbar: falsch,
  beschreibbar: true,
  Wert: Student,
});
Student.prototype.studying = Funktion () {
  console.log(dieser.name + "Lernen");
};

const stu = neuer Student(201801);
stu.running(); // fzb läuft~
stu.studying(); // fzb studiert

Speicherkarte:

Bild-20210924105330732

Defekt

1> Beim Drucken von Unterklassenobjekten sollten einige Attribute gedruckt werden, da sie sich jedoch in der übergeordneten Klasse befinden, können sie nicht gedruckt werden.

2> Wenn mehrere Unterklassenobjekte bestimmte Operationen ausführen, beeinflussen sie sich gegenseitig.

// Fügen Sie dem obigen Beispiel ein wenig Code hinzu.
Funktion Person() {
  dieser.name = "fzb";
  this.friends = []; // Ein Attribut hinzufügen}
const stu1 = neuer Student(201801);
stu1.friends.push("zzw");
const stu2 = neuer Student(201801);
console.log(stu2.friends); // [ 'zzw' ]
// stu2 erhält das Freundesattribut von stu1, was nicht erlaubt ist

3> Parameter können nicht übergeben werden. Einige Eigenschaften sind im Konstruktor der übergeordneten Klasse vorhanden. Wenn die Unterklasse instanziiert wird, können die Initialisierungsparameter nicht an die übergeordnete Klasse übergeben werden.

Vererbung durch Konstruktor

Rufen Sie den Konstruktor innerhalb des Unterklassenkonstruktors auf. Ändern Sie den this-Zeiger im Konstruktor der übergeordneten Klasse. Dann werden die von der übergeordneten Klasse hinzugefügten Eigenschaften auf das von der Unterklasse instanziierte Objekt angewendet.

Funktion Person(Name) {
  dieser.name = Name;
  diese.freunde = [];
}

Person.prototype.running = Funktion () {
  console.log(dieser.name + "Läuft~");
};

Funktion Student(sno, Name) {
  Person.call(dieser, Name); // Code hinzufügen this.sno = sno;
}
Student.prototype = neue Person();
// Nachdem Sie das gesamte Prototypobjekt neu geschrieben haben, konfigurieren Sie den Konstruktor neu
Objekt.defineProperty(Student.prototype, "Konstruktor", {
  konfigurierbar: true,
  aufzählbar: falsch,
  beschreibbar: true,
  Wert: Student,
});
Student.prototype.studying = Funktion () {
  console.log(dieser.name + "Lernen");
};

const stu1 = neuer Student(201801,"stu1");
stu1.friends.push("zzw");
const stu2 = neuer Student(201802,"stu2");
console.log(stu2.friends); // []

Zu diesem Zeitpunkt sind die drei Nachteile der Prototypkettenvererbung gelöst. Doch es traten neue Mängel auf.

Defekt

1> Der Konstruktor der übergeordneten Klasse wird mindestens zweimal ausgeführt

2> Das Prototypobjekt des Unterklassenkonstruktors ist das Instanzobjekt der übergeordneten Klasse, daher sind die Eigenschaften des Objekts undefiniert

Bild-20210924111324798

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten
  • Detaillierte Erklärung der objektorientierten Programmierung in JavaScript [Klassenerstellung, Instanzobjekte, Konstruktoren, Prototypen usw.]
  • Detaillierte Beispiele der sieben Grundprinzipien der objektorientierten JavaScript
  • Grundlagen der objektorientierten Programmierung in JS (Teil 3) Detailliertes Beispiel für Vererbungsoperationen
  • Grundlagen der objektorientierten Programmierung in JS (Teil 2) Detaillierte Erläuterung von Beispielen für Kapselungsvorgänge
  • JS Objektorientierte Programmierung Grundlagen (I) Detaillierte Erklärung von Objekten und Konstruktor-Instanzen

<<:  Memcached-Methode zum Erstellen eines Cache-Servers

>>:  CentOS7.5-Installationstutorial für MySQL

Artikel empfehlen

Layui implementiert den Bestätigungscode der Anmeldeschnittstelle

In diesem Artikelbeispiel wird der spezifische Co...

So öffnen Sie externe Netzwerkzugriffsrechte für MySQL

Wie unten dargestellt: Führen Sie hauptsächlich A...

MySQL Serie 13 MySQL-Replikation

Inhaltsverzeichnis 1. Mit der MySQL-Replikation v...

Bei der anonymen Mysql-Anmeldung kann keine Datenbankproblemlösung erstellt werden

Häufig gestellte Fragen Der Zugriff für den Benut...

So installieren Sie die MySQL 8.0-Datenbank auf dem M1-Chip (Bild und Text)

1. Herunterladen Zunächst möchte ich einen inländ...

CSS3 realisiert das Effektdiagramm zur Produktanzeige auf der Website

Dieser Artikel stellt die Wirkung der Produktanze...

Hinzufügen und Löschen von Tabelleninformationen mit Javascript

Erste Schritte mit JavaScript JavaScript ist eine...

Informationen zum Fallstrickprotokoll der Vue3-Übergangsanimation

Inhaltsverzeichnis Hintergrund Problemort Weitere...

Korrekte Änderungsschritte für das Standardnetzwerksegment von Docker

Hintergrund Ein Kollege arbeitet an seinem Sicher...

So installieren Sie MySQL und MariaDB in Docker

Beziehung zwischen MySQL und MariaDB Das Datenban...