Die Prototyp -Kette ist etwas verwirrend zu verstehen, und es gibt viele Online -Informationen. Jedes Mal, wenn ich nachts nicht schlafen kann, würde ich immer gerne einige Prototyp -Ketten und Verschlussartikel online finden, die sehr effektiv sind.
Machen Sie sich keine Sorgen über diese vielen Begriffe, es wird Ihnen wirklich nicht helfen, außer Ihrem Gehirn zu drehen. Schauen Sie sich einfach die Prototyp -Kette einfach und grob an und denken Sie über Dinge nach, die nichts mit dem Code zu tun haben, wie Menschen, Dämonen und Shemale -Männern.
1) Menschen werden von Menschen geboren und Monster werden von Dämonen geboren. Menschen und Dämonen sind beide Fälle von Objekten, während Menschen und Dämonen Prototypen sind. Ein Prototyp ist auch ein Objekt, das als Prototypobjekt bezeichnet wird.
2) Die Mutter und sein Vater einer Person können ein Haufen Babys zur Welt bringen, und eine Dämonenmutter und sein Vater können ein paar Babys zur Welt bringen. Die Frau und ein Mann eines Mannes können ein paar Babys zur Welt bringen. Ein Mann ist ein Konstruktor, der allgemein als Mann bekannt ist.
3) Menschen können Informationen über Sex aufzeichnen, damit die Menschen Informationen über Sex durch Sex finden, dh sie können den Konstruktor über Prototypobjekte finden.
4) Menschen können viele Babys in ihren Müttern zur Welt bringen, aber diese Babys haben nur eine Mutter, die die Einzigartigkeit des Prototyps ist.
5) Menschen werden auch von Menschen geboren, sie finden Menschen durch Menschen und finden dann Menschen durch Menschen ... Diese Beziehung wird als Prototypkette bezeichnet.
6) Die Prototypkette ist nicht unendlich. Wenn Sie immer wieder durch Menschen nachkommen, werden Sie feststellen, dass die Leute verdammt ... sind keine verdammten Menschen, das heißt, die Prototyp -Kette zeigt endlich auf Null.
7) Menschen, die mit einer Mutter geboren wurden, werden wie Menschen aussehen, und Monster, die mit einer Mutter geboren wurden, werden hässlich sein. Dies wird Vererbung genannt.
8) Sie haben die Hautfarbe Ihrer Mutter geerbt, Ihre Mutter hat die Hautfarbe Ihrer Mutter, Ihrer Mutter, geerbt. Dies ist das Erbe der Prototypkette.
9) Wenn Sie kein Zuhause haben, bezieht sich Ihr Zuhause auf das Haus Ihrer Mutter. Wenn Ihre Mutter kein Zuhause hat, bezieht sich Ihr Zuhause auf das Zuhause Ihrer Mutter ... Dies ist die Aufwärtssuchung der Prototyp -Kette.
10) Sie erben das Aussehen Ihrer Mutter, aber Sie können auch Ihre Haare, Shampoo, Schnitt und Schlag färben, dh die Attribute des Objekts können angepasst werden und überschreiben die ererbten Attribute.
11) Obwohl Sie gelbe Haare gewaschen, geschnitten, geblasen und gefärbt haben, können Sie das Aussehen Ihrer Mutter nicht ändern. Der jüngere Bruder und die jüngere Schwester, die Ihrer Mutter geboren wurde, haben nichts mit Ihrem gelben Haaren zu tun, waschen, geschnitten und gelbes Haar, dh die Objektinstanz kann die Eigenschaften des Prototyps nicht ändern.
12) Aber wenn Ihr Haus von Ihnen verbrannt wird, bedeutet dies, dass Ihre Mutter und Ihre Brüder verbrannt werden, und dies ist die Freigabe von Prototypattributen.
13) Der Spitzname Ihrer Mutter ist Azhen, und die Tante ihres Nachbarn nennt Sie Azhener, aber nachdem sich die Haare Ihrer Mutter von Piorou zum König des Goldenen Löwen verwandelt hatten, änderte die Tante nebenan ihre Worte und nannte Sie den goldenen Löwenprinzen. Dies wird als dynamische Natur des Prototyps bezeichnet.
14) Ihre Mutter liebt Schönheit und ist zur plastischen Chirurgie nach Korea gegangen. Sie konnte ihre Mutter nicht einmal erkennen. Auch wenn sich die Haare Ihrer Mutter wieder in Weichheit verwandeln, nannte Sie der Nachbar von nebenan immer noch den Golden Lion Prince. Weil niemand Ihre Mutter erkannt hat, ist Ihre Mutter nach plastischer Operation in die Fabrik zurückgekehrt. Dies ist das Gesamtumschreiben des Prototyps.
Verdammt! Du bist genug! Nicht BB! Zeig mir den Code!
Funktionsperson (Name) {this.name = name; } function mutter () {} mutter.prototype = {// Mutterprototyp Alter: 18, Zuhause: ['peking', 'shanghai']}; Person.Prototype = new Mutter (); // Prototyp einer Person ist Mutter // Verwenden Sie das Chrom -Debugging -Tool, um den Prototyp anzuzeigen, und bereitzustellen, dass __Proto__ Schnittstelle das Prototyp var p1 = new Person ('Jack') angezeigt wird. // P1: 'Jack'; __Proto __: 18, ['peking', 'shanghai'] var p2 = new Person ('mark'); // p2: 'mark'; __Proto __: 18, ['Peking', 'Shanghai'] p1.age = 20; /* Die Instanz kann das Grundwertattribut des Prototyps nicht ändern, genauso wie Sie das gelbe Haar nichts mit Ihrer Mutter waschen, schneiden, blasen und färben. Gleich wie var o {}; O.age = 20. * P1: Es gibt ein zusätzliches Attributalter unten, und __Proto__ ist der gleiche wie Mutter. Prototyp, Alter = 18. * P2: Nur Attributname, __Proto__ ist der gleiche wie Mutter.Prototyp*/p1.home [0] = 'Shenzhen'; /* Teilen von Referenztypattributen im Prototyp ist genau wie Sie Ihr Zuhause verbrennen. Sie verbrennt das Haus Ihrer ganzen Familie* Dies ist ein bisschen ein Pass. * P1: 'Jack', 20; __Proto __: 18, ['Shenzhen', 'Shanghai']* p2: 'mark'; __Proto __: 18, ['Shenzhen', 'Shanghai']*/p1.home = ['Hangzhou', 'Guangzhou']; /* In der Tat die gleiche Operation wie p1.age = 20. Änderung dieses Verständnisses: var o {}; O.house = ['Big', 'House']* P1: 'Jack', 20, ['Hangzhou', 'Guangzhou']; __Proto __: 18, ['Shenzhen', 'Shanghai']* p2: 'mark'; __Proto __: 18, ['Shenzhen', 'Shanghai']*/lösche p1.age; /* Nach dem Löschen der benutzerdefinierten Attribute wird der ursprünglich überschriebene Prototyp-Wert erneut extremsiert. Dies ist der Aufwärtssuchmechanismus, daher gibt es die folgende Dynamik* p1: 'Jack', ['Hangzhou', 'Guangzhou']; __Proto __: 18, ['Shenzhen', 'Shanghai']* p2: 'mark'; __Proto __: 18, ['Shenzhen', 'Shanghai']*/Person.Prototype.lastName = 'Jin'; /* Schreiben Sie den Prototyp neu und reagieren Sie dynamisch auf die Instanz. So wie Ihre Mutter eine trendige Person geworden ist, sagen die Nachbarn, dass Sie der Sohn einer trendigen Frau sind, wenn sie es erwähnen. Wenn Sie unterschiedliche Ebenen verändern, sind die Effekte oft sehr unterschiedlich. * P1: 'Jack', ['Hangzhou', 'Guangzhou']; __Proto __: 'Jin'; __ Proto __: 18, ['Shenzhen', 'Shanghai']* p2: 'mark'; __Proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai']*/person.Prototype = {Alter: 28, Adresse: {Land: 'USA', Stadt: 'Washington'}}; var p3 = new Person ('Obama'); /* Schreiben Sie den Prototyp neu! Zu diesem Zeitpunkt war der Prototyp einer Person vollständig zu einem neuen Objekt geworden, was bedeutet, dass diese Person ihre Mutter verändert hatte. * Um es so zu verstehen: var a = 10; B = a; a = 20; c = a. So bleibt B unverändert und wird zu C, so ändert sich P3 und hat nichts mit Mutter zu tun. * P1: 'Jack', ['Hangzhou', 'Guangzhou']; __Proto __: 'Jin'; __ Proto __: 18, ['Shenzhen', 'Shanghai']* p2: 'mark'; __Proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai']* p3: 'obama'; __ proto__: 28 {land: 'USA', Stadt: 'Washington'}*/Mutter. So wie Ihre Mutter zu einem neuen Trend geworden ist, sagen die Nachbarn, dass Sie wirklich eine trendige Oma sind. * P1: 'Jack', ['Hangzhou', 'Guangzhou']; __Proto __: 'Jin'; __ Proto __: 18, ['Shenzhen', 'Shanghai'], 9527* p2: 'mark'; __Proto __: 'Jin'; __ Proto __: 18, ['Shenzhen', 'Shanghai'], 9527* p3: 'Obama'; __Proto__: 28 {Country: 'USA', Stadt: 'Washington'}*/Mutter.Prototype = {Car: 2, Hobby: ['run', 'Walk']}; var p4 = new Person ('Tony');/* Umschreibe den Prototyp des Prototyps neu! Zu diesem Zeitpunkt ist der Prototyp der Mutter völlig ein neues Objekt geworden! * Da Person und Mutter von oben getrennt wurden, wird sich die Änderung der Mutter nicht mehr auf die Person auswirken. * p4: 'Tony'; __ proto__: 28 {land: 'USA', Stadt: 'Washington'}*/person.Prototype = new Mother (); // Binden Sie Var erneut p5 = neue Person ('Luffy'); // Wenn Sie diese Änderungen zu diesem Zeitpunkt anwenden müssen, müssen Sie den Prototyp einer Person auf Mutter wieder eingebundenen. Mutter .__ Proto __.__ Proto __.__ proto__ // null, denkst du, der Endpunkt der Prototypkette ist nicht null?Sie können nach dem Lesen im Grunde verstehen?
Lassen Sie uns nun über den Unterschied zwischen p1.age = 20, p1.home = ['Hangzhou', 'Guangzhou'] und p1.Home [0] = 'Shenzhen' sprechen. P1.Home [0] = 'Shenzhen'; Zusammenfassend ist es eine Form wie p1.object.method, p1.object.property.
p1.age = 20; p1.home = ['Hangzhou', 'Guangzhou']; Diese beiden Sätze sind leicht zu verstehen. Vergessen Sie zuerst den Prototyp und überlegen Sie, wie wir einem gewöhnlichen Objekt Attribute hinzufügen:
var obj = new Object (); obj.name = 'xxx'; obj.num = [100, 200];
Verstehst du so? Es ist dasselbe.
Warum schafft P1.home [0] = 'Shenzhen' dann eine Heimat -Array -Eigenschaft unter P1 und setzt dann seine erste Position auf 'Shenzhen'? Vergessen wir dies zuerst, denken wir über das obige OBJ -Objekt nach. Wenn es so geschrieben ist: var obj.name = 'xxx', obj.num = [100, 200], können Sie das gewünschte Ergebnis erzielen? Offensichtlich erhalten Sie nichts außer einem Fehler. Wie können Sie etwas dazu hinzufügen, weil OBJ noch nicht definiert wurde? In ähnlicher Weise ist das Haus in P1.Home [0] unter P1 nicht definiert, daher ist es unmöglich, das Haus [0] direkt zu definieren. Wenn Sie ein Heimarray unter P1 erstellen möchten, ist es natürlich so geschrieben:
p1.home = []; P1.Home [0] = 'Shenzhen';
Ist das nicht die am häufigsten verwendete Methode?
Der Grund, warum p1.home [0] = 'Shenzhen' einen Fehler nicht direkt meldet, liegt darin, dass in der Prototyp -Kette ein Suchmechanismus vorhanden ist. Wenn wir p1.objekt eingeben, besteht der Suchmechanismus der Prototypkette darin, zuerst nach dem entsprechenden Wert in der Instanz zu suchen. Wenn es nicht gefunden werden kann, wird es im Prototyp durchsucht. Wenn es nicht gefunden werden kann, wird es in der vorherigen Ebene der Prototypkette durchsucht ... es wird das Ende der Prototypkette erreicht, dh wenn es noch nicht gefunden wurde, wird ein undefinierter Rückgang zurückgegeben. Wenn wir p1.home [0] eingeben, ist auch der gleiche Suchmechanismus wahr. Suchen Sie zuerst P1, um festzustellen, ob Attribute und Methoden mit dem Namen nach Hause stehen, und suchen Sie dann Schritt für Schritt nach oben. Schließlich fanden wir es im Prototyp von Mutter und modifizieren es daher gleichbedeutend mit der Modifizierung des Prototyps der Mutter.
Zusammenfassend: p1.home [0] = 'Shenzhen' entspricht Mutter.Prototyp.Home [0] = 'Shenzhen'.
Aus der obigen Analyse können wir erkennen, dass das Hauptproblem der Prototyp -Kette -Vererbung im Austausch von Attributen liegt. Oft wollen wir nur Methoden teilen, aber keine Attribute. Idealerweise sollte jede Instanz unabhängige Attribute haben. Daher gibt es zwei Möglichkeiten, die Prototyp -Vererbung zu verbessern:
1) Kombinationsvererbung
Funktion Mutter (Alter) {this.age = AGE; this.hobby = ['Running', 'Football']} Mutter.Prototype.Showage = function () {console.log (this.age); }; Funktionsperson (Name, Alter) {mutter.call (this, Alter); // zweite Ausführung this.name = name; } Person.Prototype = new Mutter (); // First Execution Person.Prototype.Constructor = Person; Person.Prototype.Showname = function () {console.log (this.name);} var p1 = new Person ('Jack', 20); p1.hobby.push ('Basketball'); // P1: 'Jack'; __Proto __: 20, ['Running', 'Football'] var p2 = neue Person ('mark', 18); // p2: 'mark'; __Proto __: 18, ['Running', 'Fußball']Das Ergebnis ist lila:
Wenn hier die erste Ausführung durchgeführt wird, erhalten Sie Person.Prototype.age = undefined, Person.Prototype.Hobby = ['Running', 'Football']. Die zweite Ausführung ist, dass var p1 = neuer Person ('Jack', 20) und du P1.age = 20, p1.Hobby = ['Running', 'Football'] erhalten. Nach dem Schieben wird es zu p1.hobby = ['running', 'football', 'basketball']. Tatsächlich ist es relativ einfach, die Änderungen davon zu verstehen. Sie können dieses Ergebnis erzielen, indem Sie es einfach ersetzen. Wenn Sie das Gefühl haben, dass es ein bisschen verwirrend ist zu verstehen, versuchen Sie, die Konzepte in Ihrem Kopf wegzuwerfen und den Code von oben nach unten als Browser auszuführen. Wird es herauskommen?
Durch die Ausführung des Prototyps -Konstruktors Mother () zum zweiten Mal haben wir eine Kopie der Eigenschaften des Prototyps in der Objektinstanz kopiert, damit wir die Prototyp -Eigenschaften trennen und sich voneinander trennen können. Wenn Sie vorsichtig sind, werden Sie feststellen, dass wir beim ersten Mal Mutter () anrufen, so scheint es, dass es keine Verwendung gibt. Wie können wir es nicht nennen? Ja, es gibt die folgende parasitäre Kombinationserbranz.
2) Parasitäre Kombinationserbranz
Funktionsobjekt (o) {Funktion f () {} f.prototype = o; neu f ();} Funktion InheritPrototype (Person, Mutter) {var prototype = Object (mutter.Prototype); Prototype.Constructor = Person; Person.Prototype = Prototyp; } Funktion Mutter (Alter) {this.age = Alter; this.hobby = ['running', 'football']} mutter.prototype.showage = function () {console.log (this.age); }; Funktionsperson (Name, Alter) {mutter.call (this, Alter); this.name = name; } inheritprototype (Person, Mutter); Person.Prototype.Showname = function () {console.log (this.name);} var p1 = new Person ('Jack', 20); p1.hobby.push ('Basketball'); // p1: 'Jack'; __Proto __: 20, ['Running', 'Football'] var p2 = neue Person ('mark', 18); // p2: 'mark'; __Proto __: 18, ['Running', 'Fußball']Das Ergebnis ist lila:
Es gibt keine Alters- und Hobby -Attribute mehr im Prototyp, es gibt nur zwei Methoden, die genau das Ergebnis sind, das wir wollen!
Der entscheidende Punkt ist das Objekt (O), wobei hier ein temporäres Objekt geliehen wird, um es geschickt zu vermeiden, New Mother () aufzurufen, und dann eine neue Objektinstanz mit Prototyp O zurückzugeben, wodurch die Einstellung der Prototypkette abgeschlossen wird. Es ist sehr verwirrend, oder? Das liegt daran, dass wir Person nicht festlegen können.
Zusammenfassung
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Trotzdem gibt es tatsächlich nur einen Kern: Attributfreigabe und unabhängige Kontrolle. Wenn Ihre Objektinstanz unabhängige Attribute benötigt, besteht die Essenz aller Praktiken darin, Attribute in der Objektinstanz zu erstellen. Wenn Sie nicht zu viel denken, können Sie die unabhängigen Attribute, die Sie persönlich benötigen, direkt definieren, um die Eigenschaften des Prototyps zu überschreiben. Kurz gesagt, bei der Verwendung von Prototyp -Vererbung sollten Sie den Attributen im Prototyp besondere Aufmerksamkeit schenken, da es sich um alle Existenzen handelt, die den ganzen Körper beeinflussen.
Im Folgenden finden Sie eine einfache Liste verschiedener Methoden zum Erstellen von Objekten in JS. Die am häufigsten verwendete Methode ist jetzt der Kombinationsmodus. Bekannte Schüler können zum Ende des Artikels springen und mögen es.
1) Originalmodus
// 1. Originalmodus, Objektliteralmodus var person = {Name: 'Jack', Alter: 18, SayName: function () {alert (this.name); }}; // 1. Originalmodus, Objektkonstruktor -Modus var person = new Object (); Person.Name = 'Jack'; Person.age = 18; Person.sayname = function () {alert (this.name);};Wenn wir an Personal, Person2, "Person2 ..." erstellen wollen, müssen wir natürlich jedes Mal viel Code eingeben, und selbst hochrangige Copypaster können es nicht aushalten! Dann gibt es ein Fabrikmodell der Massenproduktion.
2) Fabrikmodell
// 2. Fabrikmodus, definieren Sie eine Funktion zum Erstellen von Objektfunktionen createPerson (Name, Alter) {var temp = new Object (); Person.name = name; Person.age = age; person.sayname = function () {alert (this.name);}; return temp; }Der Werksmodus ist die Massenproduktion, und Sie können mit einem einfachen Anruf (Papapapa ...) in den MAN-Herstellungsmodus eintreten. Sie können eine Reihe von Babys erstellen, indem Sie Ihren Namen und Ihr Alter angeben und Ihre Hände befreien. Da es jedoch in einer Fabrik betrieben wird, können Sie nicht identifizieren, welche Art des Objekts es ist, ob es sich um ein Mensch oder ein Hund handelt (Instanz des Tests ist Objekt). Darüber hinaus müssen Sie jedes Mal, wenn Sie einen Menschen erstellen, ein unabhängiges Temperaturobjekt erstellen, der Code aufgebläht und der Schmetterling elegant ist.
3) Konstruktor
// 3. Konstruktormodus, Definieren Sie eine Konstruktorfunktion für die Objektfunktion Person (Name, Alter) {this.name = name; this.age = age; this.sayname = function () {alert (this.name);}; } var p1 = neue Person ('Jack', 18); // Erstellen Sie eine P1 -Objektperson ('Jack', 18); // Attributmethoden werden dem Fensterobjekt, window.name = 'Jack', window.sayname () ausgeht, erhält die Buchse ausDer Konstruktor ähnelt den Konstruktoren von Klassen in C ++ und Java und ist leicht zu verstehen. Darüber hinaus kann Person als Typerkennung verwendet werden (Instanz -Test ist Person und Objekt). Alle Fälle sind jedoch immer noch unabhängig, und Methoden verschiedener Instanzen sind tatsächlich unterschiedliche Funktionen. Vergessen Sie hier die Wortfunktion, behandeln Sie nur SayName als Objekt und verstehen Sie es. Das heißt, Zhang San's SayName und Li Si's SayName haben unterschiedliche Existenz, aber offensichtlich erwarten wir einen SayName, um das Gedächtnis zu sparen.
4) Prototypmodus
// 4. Prototyp -Modus, direkt definieren Sie die Prototyp -Attributfunktion Person () {} Person.Prototype.name = 'Jack'; Person.Prototype.age = 18; person.prototype.sayname = function () {alert (this.name); }; // 4. Prototyp, wörtliche Definitionsmethode Funktion person () {} person.Prototype = {name: 'Jack', Alter: 18, sayName: function () {alert (this.name); }}; var p1 = new Person (); // name = 'Jack'var p2 = new Person (); // name = 'jack' 'Hier ist die Freigabe von Prototypattributen und -methoden, dh alle Instanzen beziehen sich nur auf die Attributmethoden im Prototyp, und Änderungen, die an einem beliebigen Ort generiert werden, verursachen Änderungen in anderen Fällen.
5) gemischter Modus (Konstruktion + Prototyp)
// 5. Prototypenkonstrukt -Kombinationsmodus, Funktionsperson (Name, Alter) {this.name = name; this.age = älter;} Person.Prototype = {Hobby: ['rennen', 'football']; sayname: function () {alert (this.name); }, sayage: function () {alert (this.age); }}; var p1 = new Person ('Jack', 20); // P1: 'Jack', 20; __Proto__: ['Running', 'Football'], SayName, Sayagevar P2 = New Person ('Mark', 18); // p1: 'mark', 18; __ proto__: ['rennen', 'football'], sayname, sayageDer Ansatz besteht darin, die Eigenschaftsmethoden zu setzen, die unabhängig in den Konstruktor sein müssen, und die Teile, die gemeinsam genutzt werden können, werden in den Prototyp eingebracht. Dies kann die Speichereinsparung maximieren und gleichzeitig die Unabhängigkeit von Objektinstanzen beibehalten.