Eine kurze Diskussion über die drei Vererbungsmethoden und ihre Vor- und Nachteile in JS

Die erste Methode des Prototyps:

 // Vorsitzende Klassenfunktion Person () {this.hair = 'schwarz'; this.eye = 'schwarz'; this.skin = 'gelb'; this.view = function () {return this.hair + ',' + this.eye + ',' + this.skin; }} // Subklassenfunktion Man () {this.feature = ['Beard', 'Strong']; } Man.Prototype = new Person (); var one = neuer Man (); console.log (ein.feature); // ['Beard', 'Strong'] console.log (eins.hair); // Black Console.log (ein.EYE); // Black console.log (eins.skin); // Yellow Console.log (ein.view ()); // schwarz, schwarz, gelb

Diese Methode ist die einfachste. Sie müssen nur den Prototyp -Attributwert der Unterklasse einer ererbten Instanz zuweisen, und dann können Sie die ererbte Klassenmethode direkt verwenden.

Was bedeutet das Prototypattribut? Prototyp ist der Prototyp. Jedes Objekt (definiert durch die Funktion) hat eine Standard -Prototyp -Eigenschaft, die ein Objekttyp ist.

Und dieses Standardattribut wird verwendet, um die Up-Slide-Überprüfung der Kette zu implementieren. Dies bedeutet, dass, wenn das Attribut eines Objekts nicht existiert, das Attribut durch das Objekt gefunden wird, zu dem das Prototypattribut gehört. Was ist, wenn der Prototyp nicht gefunden werden kann?

JS findet automatisch das Objekt, zu dem die Prototyp -Eigenschaft zum Prototyp -Attribut gehört, so dass es weiterhin durch den Prototyp indexiert wird, bis die Eigenschaft oder der Prototyp gefunden und schließlich leer ("undefiniert").

Beispielsweise wird in der methode one.view () im obigen Beispiel JS zuerst nach einer View () -Methode in der einen Instanz suchen. Da es keine gibt, sucht es nach dem Attribut "Prototypen des Programms", und der Wert des Prototyps ist eine Instanz der Person.

Diese Instanz hat eine View () -Methode, daher ist der Anruf erfolgreich.

Der zweite Weg besteht darin, sich zu bewerben:

 // Vorsitzende Klassenfunktion Person () {this.hair = 'schwarz'; this.eye = 'schwarz'; this.skin = 'gelb'; this.view = function () {return this.hair + ',' + this.eye + ',' + this.skin; }} // Subklassenfunktion Man () {// Person.Apply (this, New Array ()); Person.Apply (this, []); this.feature = ['Bart', 'stark']; } var One = New Man (); console.log (ein.feature); // ['Beard', 'Strong'] console.log (eins.hair); // Black Console.log (ein.EYE); // Black console.log (eins.skin); // Yellow Console.log (ein.view ()); // schwarz, schwarz, gelb

HINWEIS: Wenn der Parameter anwenden leer ist, dh, wird kein Parameter übergeben, er wird durch New Array () und [] weitergeleitet und Null ist ungültig.

Der dritte Typ ist Call+Prototype:

 // Vorsitzende Klassenfunktion Person () {this.hair = 'schwarz'; this.eye = 'schwarz'; this.skin = 'gelb'; this.view = function () {return this.hair + ',' + this.eye + ',' + this.skin; }} // Subklassenfunktion Man () {// Person.Apply (this, New Array ()); Person.call (this, []); this.feature = ['Bart', 'stark']; } Man.Prototype = new Person (); var one = neuer Man (); console.log (ein.feature); // ['Beard', 'Strong'] console.log (eins.hair); // Black Console.log (ein.EYE); // Black console.log (eins.skin); // Yellow Console.log (ein.view ()); // schwarz, schwarz, gelb

Der Implementierungsmechanismus der Anrufmethode erfordert einen weiteren Mann.Prototype = new Person (); Warum?

Dies liegt daran, dass die Aufrufmethode nur Methodenersatz implementiert und keine Objektattribute kopiert.

So erbt die Google Map -API.

Das obige fasst die Implementierung von drei Vererbungsmethoden zusammen. Jede Methode hat jedoch ihre Vor- und Nachteile.

Wenn die Elternklasse so ist:

 // Die übergeordnete Klassenfunktion Person (Haar, Auge, Haut) {this.hair = hair; this.eye = eye; this.skin = Haut; this.view = function () {return this.hair + ',' + this.eye + ',' + this.skin; }}

Wie sollten Unterklassen so gestaltet werden, dass der Unterklassen -Mann beim Erstellen von Objekten Parameter an die Person der übergeordneten Klassen übergibt. Die Vererbungsmethode des Prototyps ist nicht anwendbar.

Sie müssen die Anwendung oder Anrufmethode verwenden:

 // Methode auftragen // Unterklasse Funktion Mann (Haar, Auge, Haut) {Person.Apply (this, [Haar, Auge, Haut]); this.feature = ['Bart', 'stark']; } // METHODE // SUB -CLASS -Funktion Mann (Haar, Auge, Haut) {Person.call (this, Haar, Auge, Haut); this.feature = ['Bart', 'stark']; }

Die Verwendung der Anwendenmethode gibt jedoch immer noch Nachteile. Warum? In JS haben wir einen sehr wichtigen Operator, der "Instanz" ist, der verwendet wird, um zu vergleichen, ob eine bestimmte Gegenrichtung eines bestimmten Typs ist.

In diesem Beispiel sollte auch eine Instanz auch ein Personentyp sein. Nach der Erben der Anwendungsmethode gehört man jedoch nicht zum Typenart, dh der Wert von (einer Instanz der Person) ist falsch.

Nach all dem ist die beste Methode zur Erben des Call+-Prototyps. Danach können Sie versuchen, ob der Wert von (eine Instanz von Basiclass) wahr ist.

Die dritte Vererbungsmethode hat auch Fehler: Wenn Sie neue Objekte unterkließen, müssen Sie die von der übergeordneten Klasse erforderlichen Parameter übergeben, und die Eigenschaften und Methoden in der übergeordneten Klasse werden reproduziert. Die folgende Vererbungsmethode ist perfekt:

 Funktionsperson (Name) {this.name = name; } Person.Prototype.getName = function () {return this.name; } Funktion chinesischer (Name, Nation) {Person.call (this, Name); this.nation = nation; } // Inherit -Methodenfunktion inherit (Unterklasse, SuperClass) {Funktion f () {} f.prototype = SuperClass.Prototype; subclass.Prototype = new f (); subclass.Prototype.Constructor = subclass.Constructor; } inherit (chinesische, Person); Chinesisch.Prototype.getNation = function () {return this.nation; }; var p = neue Person ('Shijun'); var c = neuer Chinesisch ("Liyatang", "China"); console.log (p); // Person {Name: "Shijun", getName: function} console.log (c); // Chinesisch {Name: "Liyatang", Nation: "China", Konstruktor: Funktion, GetNation: Funktion, getName: function} console.log (P.Constructor); // Funktionsperson (Name) {} console.log (C.Constructor); // Funktion chinesische () {} console.log (c Instanz chinesisch); // True Console.log (c Instanz der Person); // WAHR

Der obige Artikel erörtert kurz die drei Vererbungsmethoden und deren Vor- und Nachteile in JS. Dies ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.