Warum müssen Sie JavaScript verwenden, um die Vererbung zu implementieren? Ausführliche Erläuterung von Beispielen verschiedener Vererbungsmethoden

Warum müssen Sie JavaScript verwenden, um die Vererbung zu implementieren?

Die Leistung früher PC-Maschinen ist wirklich nicht schmeichelhaft. Der gesamte Druck liegt auf der Serverseite und dem Client-Browser dient lediglich der Dekoration. In Verbindung mit dem damals beliebten Tabellenlayout und dem Internetzugang über die Telefonleitung 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.

Extrahieren Sie nun ein Modell mit dem Namen „Person“ aus dem Front Desk, das über die Grundattribute „Name“ und „Alter“ verfügt. Standardmäßig kann jeder sprechen, sodass die Sprechfunktion für jede Instanz zum Genießen vorhanden 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
}

Mehrere gängige Vererbungsmethoden:

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, fügen Sie direkt die Instanz der übergeordneten Klasse neue Person('purpose') hinzu. ) wird dem Prototyp der Unterklasse zugewiesen. Tatsächlich sind die Instanzen der Unterklasse man1 und man2 selbst völlig leere Objekte. Alle Eigenschaften und Methoden müssen in der Prototypenkette gefunden werden, sodass die gefundenen Eigenschaften und Methoden gleich sind.
Daher ist es unrealistisch, die Prototyp-Kettenvererbung direkt zu nutzen.

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 gelten die Unterklassen im Konstruktor, um den übergeordneten Konstruktor aufzurufen Um den Effekt des Erbens der Eigenschaften der übergeordneten Klasse zu erzielen, ist es viel besser, die Prototypenkette direkt zu verwenden. Mindestens jede Instanz verfügt über einen eigenen Anteil an Ressourcen. Diese Methode kann jedoch nur die Instanzeigenschaften erben Die übergeordnete Klasse ist daher besser zu finden. Ohne die Say-Methode muss die Prototypenkette geändert werden, um alle Eigenschaften und Methoden der übergeordneten Klasse zu erben, wodurch die kombinierte Vererbungsmethode eingeführt wird.

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 den Prototyp überschreiben attributes , aber es besteht keine Notwendigkeit, die say-Methode auf dem Prototyp zu überschreiben (da sie nicht vorhanden ist), daher gibt man1.say === man2.say hier immer noch true zurück, Sie müssen also sehr vorsichtig mit dem Prototyp sein Eigenschaften, die nicht überschrieben werden, da sie allen Instanzen von gemeinsam sind.

4. Parasitäre Kombinationsvererbung

Um ehrlich zu sein, weiß ich nicht, wie die folgende Form heißt, aber sie ist tatsächlich die beliebteste und klassische 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 kombinierten Vererbung und der oben genannten Kombination Vererbung ist die Konstruktion des Unterklassen-Prototypobjekts (a. und b.). Hier wird die Methode Object.creat(obj) verwendet, die eine flache Kopie des eingehenden obj-Objekts erstellt, ä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 direkt zu kopieren, wie es bei der allgemeinen kombinierten Vererbung der Fall ist (Zum Beispiel Man.prototype = new Person();), dies ist nur ein sehr heftiges Überschreiben von Eigenschaften. 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.

Das obige ist der detaillierte Inhalt vonWarum müssen Sie JavaScript verwenden, um die Vererbung zu implementieren? Ausführliche Erläuterung von Beispielen verschiedener Vererbungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!