Beispielanalyse der Nutzungsbeispiele für Prototypen in JS

Dieser Artikel beschreibt die Verwendung von Prototypen in JS. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:

Der Fototyp in JS ist ein schwieriger Teil von JS zu verstehen

Dieser Artikel basiert auf den folgenden Wissenspunkten:

1 Prototyp -Designmodus

In .NET können Sie Clone () verwenden, um die Prototypmethode zu implementieren

Die Hauptidee der Prototypmethode ist, dass es jetzt eine Klasse A gibt. Ich möchte eine Klasse B erstellen. Diese Klasse wird von A prototypisiert und kann erweitert werden. Wir nennen Bs Prototyp A.

2 JavaScript -Methoden können in drei Kategorien unterteilt werden:

Klasse A -Methode

B -Objektmethode

C -Prototypmethode

Beispiele sind wie folgt:

 Funktion people (name) {this.name = name; // Objektmethode this.inTroduce = function () {alert ("Mein Name ist"+this.name); }} // Klasse Methode people.run = function () {alert ("i kann run");} // Prototyp -Methode people.prototype.inTroducechinese = function () {alert ("Mein Name ist"+this.name);} // testen var p1 = neue peopers ("wickking"); p1.Inroducucuce (); People.run (); p1.introducechinese ();

3 OBJ1.Func.Call (OBJ) Methode

Es bedeutet, OBJ als OBJ1 zu betrachten und die Func -Methode aufzurufen

Ok, die folgenden Probleme werden nacheinander gelöst:

Was bedeutet Prototyp?

Jedes Objekt in JavaScript hat ein Prototypattribut. Die Erläuterung des Prototypsattributs eines Objekts in JavaScript lautet: Rückgabe auf den Objekttyp -Prototyp.

 A.Prototype = neu B ();

Das Verständnis des Prototyps sollte nicht mit der Vererbung verwechselt werden. Der Prototyp von A ist eine Instanz von B. Es kann verstanden werden, dass A alle Methoden und Eigenschaften in B. A geklont hat. Was hier betont wird, ist das Klonen und nicht das Erbschaft. Dies kann passieren: As Prototyp ist eine Instanz von B, und Bs Prototyp ist auch eine Instanz von A.

Schauen wir uns ein Beispiel für ein Experiment an:

 function baseclass () {this.showsg = function () {alert ("BaseClass :: ShowMSG"); }} Funktion extendClass () {} extendClass.Prototype = new BaseClass (); var instance = new extendClass (); Instance.showsg (); // BaseClass :: Showmsg anzeigen

Wir definieren zuerst die Basisklassenklasse und möchten dann die Ausweitklasse definieren, aber wir beabsichtigen, eine Instanz von BaseClass als Prototyp zum Klon -ExtendClass zu verwenden, enthält auch die Showmsg -Objektmethode.

ExtendClass.Prototype = new BaseClass () kann gelesen werden als: ExtendClass wird mit einer Instanz von BaseClass als Prototypklonierung erstellt.

Dann wird es eine Frage geben, was passieren würde, wenn die ExtendClass selbst eine Methode mit demselben Namen wie die Basiclass -Methode enthält?

Hier ist erweitertes Experiment 2:

 function baseclass () {this.showsg = function () {alert ("BaseClass :: ShowMSG"); }} Funktion extendClass () {this.showmsg = function () {alert ("ExtendClass :: ShowMSG"); }} extendClass.Prototype = new BaseClass (); var instance = new extendClass (); instance.showsg (); // show extendClass :: Showmsg

Experimentelle Beweise: Wenn eine Funktion ausgeführt wird, wird zunächst die Funktion in der Ontologie zur Suche gehen. Wenn es gefunden wird, läuft es. Wenn es nicht gefunden wird, geht es zum Prototyp, um nach der Funktion zu suchen. Oder es kann verstanden werden, dass der Prototyp nicht gleichnamige Funktionen klonen.

Dann wird es eine weitere neue Frage geben:

Was ist, wenn ich eine Instanz der ExtendClass -Instanz verwenden möchte, um die Objektmethode von BaseClass 'Showsg aufzurufen?

Die Antwort ist, Anruf zu verwenden:

 ExtendClass.Prototype = new BaseClass (); var instance = new extendClass (); var baseInstance = new BaseClass (); BaseInstance.showsg.call (Instanz); // BaseClass :: Showmsg anzeigen

Hier BaseInstance.showsg.call (Instanz); Lesen Sie als "Anrufinstanz als BasisInstance, rufen Sie seine Objektmethode Showmsg auf".

Ok, jemand kann hier fragen, warum nicht baseclass.showsg.call (Instanz);

Dies ist der Unterschied zwischen Objektmethoden und Klassenmethoden. Was wir aufrufen wollen, ist die Objektmethode von BaseClass

Wenn der folgende Code klar verstanden wird, ist das, was dieser Artikel besagt, bereits verstanden:

 <script type = "text/javaScript"> function baseclass () {this.showmsg = function () {alert ("BaseClass :: Showmsg"); } this.baseshowsg = function () {alert ("BaseClass :: baseSeShowsg"); }} BaseClass.showmsg = function () {alert ("BaseClass :: Showmsg static");} Funktion extendClass () {this.showmsg = function () {alert ("extendClass :: showsg"); }} extendClass.showmsg = function () {alert ("extendClass :: showsg static")} extendClass.Prototype = new BaseClass (); var instance = new extendClass (); Instance.showmsg (); // show extendClass :: ShowmsginStance.Baseshowsg (); // BaseClass :: BaseSeShowsginStance.showsg (); // show extendClass :: Showmsgbaseclass.showmsg.call (Instanz); // BaseClass :: Showmsg staticvar baseInstance = new BaseClass (); BaseInstance.showmsg.call (Instanz); // BaseClass :: Showmsg </script> anzeigen

Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.