Dieser Artikel analysiert den Vergleich mehrerer Vererbungsmethoden in der Javascript-Programmierung anhand von Beispielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Eröffnung
Im „strengsten“ Sinne ist JavaScript keine echte objektorientierte Sprache. Der Grund für diese Aussage liegt im Allgemeinen darin, dass JavaScript als schwach typisierte Sprache sich stark von der Vererbungsmethode starker Sprachen wie Java oder C# unterscheidet und daher standardmäßig eine nicht gängige objektorientierte Methode ist Es gibt sogar viele. Das Buch beschreibt es als eine „nicht vollständig objektorientierte“ Sprache. Tatsächlich bin ich persönlich der Meinung, dass die Methode nicht wichtig ist. Wichtig ist, ob sie über objektorientiertes Denken verfügt. Leute, die sagen, dass JavaScript keine objektorientierte Sprache ist, haben sich möglicherweise nicht eingehend mit der Vererbungsmethode von JavaScript befasst Ich habe diesen Artikel zur Kommunikation geschrieben.
Warum Sie Javascript verwenden müssen, um die Vererbung zu implementieren
Die Leistung früher PC-Maschinen ist wirklich nicht schmeichelhaft. Der gesamte Druck lag auf der Serverseite und der Client-Browser war nur eine Dekoration. In Verbindung mit dem damals beliebten Tabellenlayout und dem Internetzugang per Telefon war das Surfen auf Webseiten sehr langsam; heute entwickelt sich das Internetzeitalter rasant, die Hardware von PCs wurde erheblich verbessert und auch die Leistung von Client-Browsern ist sehr enttäuschend. Auch das Modell der Webentwicklung verändert sich stillschweigend: Der Server soll nicht mehr so „hart“ sein wie bisher. Auf diese Weise soll der Druck auf jeden einzelnen Client verteilt werden Durch die Kosteneinsparung im Unternehmen wird auch die Web-Front-End-Entwicklung interessanter – es entstehen immer mehr Front-End-Frameworks und sogar viele Front-End-MVC-Frameworks. In diesem Zusammenhang besteht die Rolle von JavaScript definitiv nicht nur darin, eine einfache Überprüfung durchzuführen, einige Anforderungen zu senden oder ein DOM zu betreiben. Es muss mehr Rollen wie Front-End-Routing und Business-Schicht übernehmen, und JavaScript muss viele logische Aufgaben übernehmen Aufgaben, die die Abstraktion von Front-End-Daten (d. h. Modellen) umfassen, und nur durch die Verwendung von objektorientiertem Denken können die abstrahierten Daten gut verarbeitet werden, daher ist die Vererbung hier sehr wichtig.
Beginnen Sie mit einem einfachen Bedürfnis
Extrahieren Sie nun ein Modell mit dem Namen „Person“ von der Rezeption, das über die Grundattribute „Name“ und „Alter“ verfügt. Standardmäßig kann jeder sprechen, sodass die Sprechfunktion für jede Instanz auf dem Prototypobjekt platziert ist. Nun muss der Mensch die grundlegenden Eigenschaften der Person erben und auf dieser Basis seine eigenen einzigartigen Eigenschaften hinzufügen.
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man() {
//my own properties
}
Im Folgenden werden mehrere gängige Vererbungsmethoden vorgestellt.
1. Prototypenkettenvererbung
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true
Diese Vererbungsmethode ist sehr direkt. Um alle Attributmethoden von Person (Instanz und Prototyp) zu erhalten, wird die Instanz new Person('pursue') der übergeordneten Klasse tatsächlich direkt zugewiesen , die Unterklasse Die Klasseninstanzen man1 und man2 selbst sind völlig leere Objekte. Alle Attribute und Methoden müssen in der Prototypenkette gefunden werden, sodass die gefundenen Attribute und Methoden gleich sind.
Daher ist es unrealistisch, die Vererbung der Prototypenkette direkt zu verwenden.
2. Konstruktorvererbung verwenden
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function
Hier verwendet die Unterklasse apply im Konstruktor, um den Konstruktor der übergeordneten Klasse aufzurufen, um den Effekt zu erzielen, dass die Eigenschaften der übergeordneten Klasse geerbt werden. Dies ist viel besser als die direkte Verwendung der Prototypenkette verfügt über eigene Ressourcen, aber diese Methode kann nur die Instanzattribute der übergeordneten Klasse erben, sodass die Say-Methode nicht gefunden werden kann. Um alle Attribute und Methoden der übergeordneten Klasse zu erben, muss die Prototypenkette geändert werden. Damit wird die kombinierte Vererbungsmethode eingeführt.
3. Kombinationsvererbung
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe
Es ist zu beachten, dass die Instanzattribute von man1 und man2 tatsächlich die Prototypattribute überschreiben, aber nicht die say-Methode des Prototyps überschreiben (da sie diese nicht haben), also hier man1.say === man2 .say gibt immer noch „true“ zurück. Achten Sie also darauf, die Prototypeigenschaft nicht zu überschreiben, da sie allen Instanzen gemeinsam ist.
4. Parasitäre Kombinationsvererbung
Um ehrlich zu sein, kenne ich den Namen des folgenden Formulars wirklich nicht, aber es ist tatsächlich die beliebteste und klassischste JavaScript-Vererbungsmethode. Tatsächlich müssen Sie nur die Struktur des Prototypobjekts verstehen:
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);
Tatsächlich besteht der einzige Unterschied zwischen der parasitären Kombinationsvererbung und der oben genannten Kombinationsvererbung in der Art und Weise, wie das Prototypobjekt der Unterklasse (a. und b.) erstellt wird. Hier wird die Methode Object.creat(obj) verwendet verarbeitet das eingehende Objekt. Das Objekt wird flach kopiert, ähnlich wie:
function create(obj){
function T(){};
T.prototype = obj;
return new T();
}
Daher verbindet a. das Prototypobjekt der Unterklasse gut mit dem Prototypobjekt der übergeordneten Klasse, anstatt den Prototyp der Unterklasse wie bei der allgemeinen kombinierten Vererbung direkt zu kopieren (z. B. Man.prototype = new Person() ;), das ist nur ein sehr heftiges Überschreiben von Attributen. Die Methode der parasitären Kombinationsvererbung erbt Instanzattribute und Prototypattribute separat, was in der Implementierung sinnvoller ist.
Hinweis: Code b ändert das Ergebnis von „instanceof“ nicht, ist jedoch strenger für Szenarien, in denen ein Konstruktor erforderlich ist.
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.
