Wenn Sie zu dieser Zeit etwas Wissen wirklich nicht verstehen können, können Sie es vorerst loslassen und es der Zukunft überlassen und vielleicht können Sie es verstehen.
Vor ein paar Monaten hielt ich "JavaScript Advanced Programming (dritte Ausgabe)" und nachdem ich das Objekt erstellt hatte, begann ich, die Erbschaft zu kauen. Nachdem ich jedoch die Prototyp -Kette gekaut hatte, konnte ich es wirklich nicht mehr ausstehen, und mein Verstand wurde immer chaotischer, also warf ich es beiseite und schaute weiterhin die letztere. Jetzt, wo ich diesen Sommerferien verwendet habe, um dieses Erbe zu verstehen, werde ich meine Notizen aussortieren.
Prototypenkettung
Lassen Sie uns zuerst einen Artikel lesen. Der Autor des Artikels ist sehr gut und mit hochauflösenden Bildern ausgestattet. Lol…
Link: [Studiennotizen] Sehen Sie sich die JS -Prototyp -Kette aus einer kleinen Perspektive an
Ein paar Wörter aus dem Originaltext
Bestimmen Sie die Beziehung zwischen Prototyp und Instanz
Es gibt zwei Möglichkeiten, die Beziehung zwischen einem Prototyp und einer Instanz zu erkennen:
Instanz: Bestimmt, ob das Objekt eine Instanz eines anderen Objekts ist
Der interne Rechenmechanismus von Instanz ist wie folgt:
functionInstance_of (l, r) {// l repräsentiert den linken Expression. // Nehmen Sie den impliziten Prototyp von L while (true) {if (l === null) returnFalse; if (o === l) // Hier der Punkt: Wenn O streng gleich L ist, kehren Sie TruereturnTrue zurück; L = l .__ proto__; }}Der obige Code wird aus: Eingehende Analyse des JavaScript-Instanzbetreibers ausgeschlossen
isPrototypeof (): Test, ob ein Objekt in der Prototypkette eines anderen Objekts vorhanden ist
Bitte beachten Sie die Unterschiede zwischen diesen beiden Methoden: JavaScript isPrototypeof vs Instance der Verwendung
Verwenden Sie nur die Prototypkette, um die Vererbung zu erreichen
Nachteile: 1. Die auf den Typwert beziehe Prototypattribute werden von der Instanz gemeinsam genutzt. 2. Beim Erstellen einer Instanz eines Subtyps können Parameter nicht an den Supertyp -Konstruktor übergeben werden.
functionFather () {this.name = "father"; this.friends = ['aaa', 'bbb']; vanconsole.log (s2.name); // Fathers1.Name = "Son"; console.log (S1.Name); // Sonconsole.log (S2.Name); // vanconsole.log (S1.freunde); // ["aaa", bbb "] console.log (S2.Log (S2.Log (S2.Log); "bbb"]s1.friends.push('ccc','ddd');console.log(s1.friends);// ["aaa", "bbb", "ccc", "ddd"]console.log(s2.friends);// ["aaa", "bbb", "ccc", "ddd"]Verwenden Sie nur Konstruktoren, um die Vererbung zu erreichen
Implementierungsmethode: Rufen Sie den SuperType -Konstruktor im Subtyp -Konstruktor auf (mit den Methoden an apply () und call ())
Vorteile: Lösen Sie das Problem der Referenzierungstypattribute im Prototyp, und Unterklassen können Parameter an Superklassen übergeben
Nachteile: Unterklasse -Instanzen können nicht auf die in der übergeordneten Klassenprototyp definierten Methoden zugreifen. Daher gibt es keine Möglichkeit, über die Wiederverwendung von Funktionen zu sprechen.
Funktionsfunktion (Name, Freunde) {this.name = name; this.friends = Friends;} father.prototype.getName = function () {return this.name;}; functionson (Name) {// Hinweis: Um sicherzustellen, dass der Vater Konstruktor die Eigenschaften des Sohnes des Sohnes, das den Codebestrukturierte, nicht übersteht, das der Codes, das den Vater aufnimmt, den Vater -Konstruktor vor dem Betrag der Probe des Sohnes, das in dem Vater -Konstruktor anruft. Father.call (this, name, ['aaa', 'bbb']); this.age = 22;} vars1 = newson ('Son1'); vars2 = newSon ('Son2'); console.log (s1.name); // Son1console.log (s2.name); //// Son2s1.friends.push ('ccc', 'ddd'); console.log (s1.friends); // ["aaa", "bbb", "ccc", "ddd"] trsole // typeerrror: s1.getName ist keine Funktionen2.getName (); // typeerror: s2.getName ist keine FunktionKombinationsvererbung
Implementierungsmethode: Verwenden Sie die Prototyp -Kette, um die Vererbung von Prototypeigenschaften und -methoden zu implementieren und den Konstruktor zur Implementierung der Vererbung von Instanzeigenschaften zu implementieren.
FunctionFather (Name, Freunde) {this.name = name; this.friends = Friends;} father.prototype.money = "100K $"; Vater.Prototype.getName = function () {console.log (this.name); Father.call (this, name, ['aaa', 'bbb']); this.age = ay;} // Erbe die Eigenschaften und Methoden im Prototyp der Elternklasse Son.Prototype = newfather (); Son.Prototype = newson ('Son1', 12); // Son1S1.getage (); // 12vars2 = newSon ('Son2', 24); console.log (S2.Friends); // ["aaa", "BBB"] console.log (S2.Money); // 100K $ S2Getname (); // Son2s2.getage (); // 24Die Kombinationsvererbung vermeidet den Defekt, einseitig mit Prototypketten oder Konstruktoren zu implementieren, um die Vererbung zu implementieren, kombiniert ihre Vorteile und wird zum am häufigsten verwendeten Vererbungsmodell in JavaScript, aber es wird auch fehlerhaft, und der Defekt der Kombinationsvererbung wird ausdrücklich später erwähnt.
Prototypaler Vererbung
Implementierungsidee: Verwenden Sie Prototypen, um neue Objekte basierend auf vorhandenen Objekten zu erstellen, ohne benutzerdefinierte Typen zu erstellen.
Um dies zu erreichen, wird die folgende Funktion (OBJ) eingeführt
functionObj (o) {functionF () {} f.prototype = o; returnNewf ();} varperson1 = {Name: "Percy", Freunde: ['aaa', 'bbb']}; varperson2 = obj (person1); person2.name = "person2.friends); percyconsole.log (person2.name); // zyjconsole.log (person1.friends); // ["aaa", "bbb", "ccc"] console.log (person2.friends); // ["aaa", "bbb", "cccmascript 5 methods). Bei einem Parameter verhalten sich das Objekt.Create () und OBJ () -Methoden genauso. VARPerson1 = {Name: "Percy", Freunde: ['aaa', 'bbb']}; varperson2 = Object.create (Person1); Person2.name = "zyj"; person2.friends.push ('ccc'); console.log (person1.name); // Percyconsol.log (logog (person2.Name); Zyjconsole.log (Person1.friends); // ["AAA", "BBB", "CCC"] console.log (Person2.friends); // ["Aaa", "BBB", "CCC"]Diese Vererbung kann ausgewählt werden, wenn der Konstruktor nicht mobilisiert werden muss, um ihn zu erstellen, sondern nur, dass ein Objekt einem anderen ähnlich bleibt.
Parasitäres Vererbung
Die parasitäre Vererbung ist eine Idee, die eng mit der Prototyperbschaft zusammenhängt.
Implementierungsidee: Erstellen Sie eine Funktion, mit der nur der Vererbungsprozess zusammengefasst ist, der das Objekt intern auf irgendeine Weise verbessert und schließlich das Objekt zurückgibt.
functionObj (o) {functionF () {} f.prototype = o; returnNewf ();} FunktionenCreatePerson (Original) {// capsulate Inheritanzprozess varclone = obj (ursprünglich); // Objektclone erstellen.showsoming = function () {// Objektkonsole verbessert. }; returnClone; // return object} varperson = {name: "percy"}; varberson1 = createPerson (Person); console.log (Person1.Name); // percyperson1.showsomething (); // Hallo Welt!Parasitäre Kombinationserbranz
Sprechen wir zunächst über die Mängel unseres vorherigen Kombinationsvererbes. Das größte Problem mit der Kombinationserbranz ist, dass der Konstruktor der übergeordneten Klasse zweimal aufgerufen wird: Einer wird beim Erstellen des Prototyps der Unterklasse und der andere beim Aufrufen des Unterklassenkonstruktors wird der Konstruktor der übergeordneten Klasse innerhalb des Unterklassenkonstruktors aufgerufen.
FunctionFather (Name, Freunde) {this.name = name; this.friends = Friends;} father.prototype.money = "100K $"; Vater.Prototype.getName = function () {console.log (this.name); Vater.call (this this, name, ['aaa', 'bbb']); // Der zweite Aufruf an father () wird tatsächlich nennt.Der erste Aufruf macht den Prototyp der Unterklasse zu einer Instanz der übergeordneten Klasse, so dass der Prototyp der Unterklasse das Instanzattribut der übergeordneten Klasse erhält. Der zweite Aufruf führt dazu, dass das Instanzattribut der Unterklasse auch das Instanzattribut der übergeordneten Klasse erhält. Das Instanzattribut der Unterklasse blockiert die Attribute, die standardmäßig mit dem Unterklassenprototyp dupliziert werden. Nach diesen beiden Aufrufen erscheinen unnötige Attribute im Subklass -Prototyp, wodurch eine parasitäre Kombinationserbranz zur Lösung dieses Problems eingeführt wird.
Die Idee hinter der parasitären Kombinationsvererbe lautet: Es besteht keine Notwendigkeit, den Konstruktor der übergeordneten Klassen aufzurufen, um den Prototyp der Unterklasse anzugeben. Alles, was wir brauchen, ist eine Kopie des Prototyps der Elternklasse.
Im Wesentlichen soll parasitäres Vererbung verwendet werden, um den Prototyp der übergeordneten Klasse zu erben und dann das Ergebnis an den Prototyp der Kinderklasse zurückzugeben.
functionObj (o) {functionF () {} f.prototype = o; returnNewf ();} functionInheritPrototype (Son, Vater) {varPrototype = obj (Vater.Prototyp); // Objektprototype.Constructor = Son; // Object Son.Prototype = Prototype erhöhen; // Return Object} FunctionFather (Name, Freunde) {this.name = name; this.friends = Friends;} Vater.Prototype.money = "100K $"; Vater.Prototype.getName = function () {console.log (this.name); Father.call (this, name, ['aaa', 'bbb']); this.age = age;} // Erben Sie die Eigenschaften und Methoden im Prototyp der Elternklasse inneheritPrototype (Sohn, Vater); Son.Prototype.getage = function () {console.log (this.age);}; vars1 = newson ('Son1', 12); ["AAA", "BBB", "CCC"] console.log (S1.Money); // 100K $ S1.getName (); // Son1S1.getage (); // 12vars2 = newSon ('Son2', 24); console.log (S2.Friends); // ["aaa", "BBB"] console.log (S2.Money); // 100K $ S2Getname (); // Son2s2.getage (); // 24Vorteile: Machen Sie Unterklassenprototypen vermeiden, unnötige Instanzeigenschaften in der Elternklasse zu erben.
Entwickler glauben im Allgemeinen, dass parasitär kombinatorische Vererbung die idealste Vererbungsmethode ist, die auf dem Typ -Vererbung basiert.
endlich
Schließlich kann ich zwei sehr harte Artikel nur empfehlen
JavaScript, wie prototypisches Vererbung wirklich funktioniert
JavaScripts pseudo klassisches Vererbungsdiagramm (muss die Wand überqueren)
Machen Sie ein hartes Bild aus dem zweiten Artikel:
Nachdem ich es gelesen habe, verstehe ich die Prototypkette in Sekunden. Gibt es etwas?
Das obige ist die Erfassung der von JavaScript geerbten Informationen. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!