Detaillierte Erläuterung der Javascript-Prototypkettenpflege und der Vererbung_Javascript-Fähigkeiten-js-Tutorial-php.cn

Detaillierte Erläuterung der Javascript-Prototypkettenpflege und der Vererbung_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:30:27

Original

1454 Leute haben es durchsucht

Einer. Zwei Prototypen

Viele Leute wissen, dass JavaScript eine prototypische Vererbung ist, durch die die Vererbung von JavaScript wunderbar erklärt werden kann Tatsächlich kann die JavaScript-Vererbung nicht allein durch die Verwendung dieses Attributs abgeschlossen werden.
Der Prototyp, den wir im Code zur Vervollständigung der Vererbung verwenden, wird hier nicht besprochen. Sie können die Informationen überprüfen Ein weiteres unsichtbares Prototyp-Mitglied.
Jede Instanz verfügt über ein Prototyp-Attribut, das auf den Prototyp verweist. Auf dieses Attribut kann nicht zugegriffen werden, und es kann natürlich nicht geändert werden, da dies die Grundlage für die Aufrechterhaltung der JavaScript-Vererbung ist.

Code kopieren Der Code lautet wie folgt:

//Konstruktordeklaration

Funktion Guoyansi(){ }

Funktion GuoyansiEx(){}

//Prototypische Vererbung

​​​​​ GuoyansiEx.prototype=new Guoyansi();

//Objekt erstellen

      var g1=new GuoyansiEx();

      var g2=new GuoyansiEx();

Die Objekte im obigen Code können durch das folgende Diagramm veranschaulicht werden

2. Prototypenwartung

Das Konstruktorattribut einer von einem Konstruktor generierten Instanz zeigt immer auf den Konstruktor. Wir halten dies vorübergehend für richtig.

Code kopieren Der Code lautet wie folgt:

Funktion Guoyansi(){ }

var obj1=new Guoyansi();

console.log(obj1.constructor===Guoyansi);//true

Tatsächlich verfügt der Konstruktor selbst nicht über das Attribut Konstruktor. Woher kommt dieses Attribut? Die Antwort lautet: vom Prototyp.

Daher wird folgende Schlussfolgerung gezogen

Code kopieren Der Code lautet wie folgt:obj1.constructor===Guoyansi.prototype.constructor= ==Guoyansi

Da wir den Konstruktor über den Konstruktor finden können, können wir das obige Diagramm weiter verbessern.

Code kopieren Der Code lautet wie folgt:

Funktion GuoyansiEx(){}

                                 GuoyansiEx.prototype=new Guoyansi();

console.log(GuoyansiEx.constructor===GuoyansiEx)//false

Gemäß dem obigen Bild sollte das obige Ergebnis wahr sein, aber warum ist es falsch?

Machen wir jetzt eine Analyse.

Der Prototyp von GuoyansiEx wurde von der Instanz von Guoyansi neu geschrieben, daher stammt der Konstruktor im Prototyp von GuoyansiEx natürlich von der Instanz von Guoyansi.

Der Konstruktor in der Guoyansi-Instanz stammt von Guoyansi.prototype. Und Guoyansi.prototype wurde nicht neu geschrieben,
Der Konstruktor von Guoyansi.prototype zeigt also auf Guoyansi (Konstruktor);

Basierend auf der obigen Analyse werden die folgenden Schlussfolgerungen gezogen

Code kopieren Der Code lautet wie folgt:GuoyansiEx.constructor===Guoyansi.constructor=== Guoyansi;

Wenn die Anweisungen des Konstruktors während des Entwicklungsprozesses sehr genau sind, können Sie Folgendes tun.

Code kopieren Der Code lautet wie folgt:

/**Methode 1:**/

Funktion Guoyansi(){}

Funktion GuoyansiEx(){}

                                 GuoyansiEx.prototype=new Guoyansi();

                                                                                                                                   GuoyansiEx.prototype.constructor=GuoyansiEx;//Setze den Konstruktorzeiger zurück.

Code kopieren Der Code lautet wie folgt:

/**

Methode 2

**/

Funktion Guoyansi(){}

Funktion GuoyansiEx(){

This.constructor=arguments.callee;

            }

​​​​​​ GuoyansiEx.prototype=new Guoyansi();

Code kopieren Der Code lautet wie folgt:

/**

Methode 3

**/

Funktion Guoyansi(){}

Funktion GuoyansiEx(){

This.constructor=GuoyansiEx;

            }

​​​​​​ GuoyansiEx.prototype=new Guoyansi();

3. Welchen Nutzen haben unsichtbare Prototypen?

Wir können die sichtbare Prototypenkette bedienen, um unsere Vererbung zu vervollständigen, aber wir können diese unsichtbare Prototypenkette weder sehen noch bedienen.
Die Vererbung in der objektorientierten Klasse weist Ähnlichkeiten mit übergeordneten Klassen auf. Daher können Sie in Unterklassen keine von übergeordneten Klassen geerbten Elemente löschen.
Um diese Funktion aufrechtzuerhalten, erstellt JavaScript ein Prototyp-Attribut innerhalb des Objekts, das wir nicht sehen können und das Benutzern keinen Zugriff darauf ermöglicht. Auf diese Weise können Benutzer den Konstruktor für jeden Zweck ändern,
Die Eigenschaften der übergeordneten Klasse der Unterklasse werden dadurch nicht zerstört.
Kurz gesagt: Der interne Prototyp wird vom prototypischen Vererbungsmechanismus von JavaScript benötigt, während der externe Prototyp von Benutzern zur Implementierung der Vererbung benötigt wird.

4. __proto__ in der Firefox-Engine SpiderMonkey

Es ist immer noch dieser Code.

Code kopieren Der Code lautet wie folgt:

Funktion Guoyansi(){}

                 Guoyansi.prototype.age=24;

Funktion GuoyansiEx(){}

            var obj1=new Guoyansi();

                           GuoyansiEx.prototype=obj1;

​​​​​​ GuoyansiEx.prototype.constructor=GuoyansiEx;//Konstruktorpunkt zurücksetzen.

            var obj2=new GuoyansiEx();

Ich möchte jetzt ab obj aufwärts auf das Alter der Attribute des Prototyps der übergeordneten Klasse Guoyansi zugreifen.
Die Idee ist folgende.
Schritt eins: obj2====>obj2.constructor.prototype
Teil 2: obj2.constructor.prototype===>GuoyansiEx.prototype;
Teil 3: GuoyansiEx.prototype===>obj1;
Teil 4: obj1.constructor====>Guoyansi
Teil 5: Guoyansi.prototype.age

Schreiben Sie es so: console.log(obj2.constructor.prototype.constructor.prototype.age)//24;
Das Endergebnis ist 24.
Das Endergebnis ist 24. Es kann normal ausgeführt werden, aber viele Bücher sagen, dass der Prototyp in der übergeordneten Klasse nicht gefunden werden kann

Eine prägnantere Eigenschaft in Firefox._proto_ eingeführt
SpiderMonkey fügt jedem erstellten Objekt standardmäßig ein Attribut namens _proto_ hinzu, das auf den vom Konstruktor verwendeten Prototyp verweist.
Tatsächlich handelt es sich um die oben erwähnte unsichtbare Prototypenkette, die hier jedoch nur getarnt öffentlich gemacht wird
So können Sie auf das Alter
zugreifen console.log(obj2.__proto__.__proto__.age);//24
Dadurch wird zwar erfolgreich auf das Prototypattribut der übergeordneten Klasse zugegriffen, dieses Attribut ist jedoch nur auf Firefox anwendbar und führt zu Fehlern in anderen Browsern.
In E5 wurde Object.getPrototypeOf() auf Object erweitert, und Sie können auf die Prototypen aller übergeordneten Klassen zugreifen.

Code kopieren Der Code lautet wie folgt:

Funktion Guoyansi(){}

                 Guoyansi.prototype.age=24;

Funktion GuoyansiEx(){}

            var obj1=new Guoyansi();

                           GuoyansiEx.prototype=obj1;

​​​​​​ GuoyansiEx.prototype.constructor=GuoyansiEx;//Konstruktorpunkt zurücksetzen.

            var obj2=new GuoyansiEx();

          var proto=Object.getPrototypeOf(obj2);

             while(proto){

console.log(proto.constructor);

                   proto=Object.getPrototypeOf(proto);

            }

console.log("Objektprototyp" proto);

Das Ergebnis ist: GuoyansiEx
Guoyansi
Objekt
Der Prototyp des Objekts ist null

Ich persönlich denke, dass dies als eine der Essenzen von objektorientiertem JavaScript angesehen werden sollte. Freunde, beziehen Sie sich bitte selbst darauf und verwenden Sie es entsprechend Ihren Anforderungen in Ihren eigenen Projekten