Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile

Vorwort

Ich habe kürzlich einige Grundkenntnisse in JavaScript wiederholt, um mich auf eine neue Reise vorzubereiten. Also begann ich, einiges von dem, was ich gelernt habe, aufzuzeichnen.

Das heutige Thema ist die native Vererbungsmethode von js

Genug geredet, weiter zum Code!

Zuerst kommt der Code unserer übergeordneten Klasse.

Hier erstellen wir eine Person-Klasse als übergeordnete Klasse und ihr Konstruktor erfordert zwei Parameter: Name und Alter.

Dann fügen wir seinem Prototyp eine SayHi-Methode hinzu.

// Übergeordnete Klassenfunktion Person (Name, Alter) {
    this.name = Name || 'kein Name';
    this.age = Alter || 0;
}

Person.prototype.sayHi = Funktion () {
    console.log('Hallo, ich bin ' + dieser.Name + ' und ich bin ' + dieses.Alter + ' Jahre alt!');
}

var p = neue Person('A',20);
p.sayHi();//Hallo, ich bin A und 20 Jahre alt!

Prototypische Vererbung

//Prototyp-Vererbungsfunktion Teacher(){
}

Lehrer.Prototyp = neue Person('B',22);
Teacher.prototype.constructor=Lehrer;

var t = neuer Lehrer();
t.sayHi();//Hi, ich bin B und 22 Jahre alt!
console.log(t Instanz von Person);//true
console.log(t Instanz von Lehrer);//true

Vorteil

Aus dem obigen Code können wir erkennen, dass die Teacher-Instanz die Eigenschaften und Methoden von Person hat. Und das Instanzobjekt ist sowohl eine Instanz von „Person“ als auch eine Instanz von „Lehrer“. Und diese Vererbungsmethode ist besonders einfach.

Mangel

Wir können leicht feststellen, dass der Name und das Alter der Lehrerklasse festgelegt sind, sowohl Name=B als auch Alter=22. Mit anderen Worten, wir können dem Konstruktor der übergeordneten Klasse nicht beliebig Parameter übergeben. Und wir können für einen Lehrer nicht mehrere Prototypen angeben, was bedeutet, dass wir keine Mehrfachvererbung haben können. Schauen wir uns dann den folgenden Code an:

var t1 = neuer Lehrer();
var t2 = neuer Lehrer();
Lehrer.Prototyp.name = "C";
t1.sayHi();//Hallo, ich bin C und 22 Jahre alt!
t2.sayHi();//Hallo, ich bin C und 22 Jahre alt!

Im obigen Code können wir sehen, dass, wenn die Eigenschaften oder Methoden im Prototyp geändert werden, auch die Eigenschaften und Methoden aller Unterklasseninstanzen geändert werden, was ein weiterer Nachteil der Prototypvererbung ist: Alle Unterklassen teilen sich dasselbe Prototypobjekt.

Hier sprechen wir über Prototypen. Ich habe vor langer Zeit einen Aufsatz über Prototypen geschrieben, aber er ist vielleicht etwas vage. Mein heutiges Verständnis ist anders als damals. Ich werde später einen weiteren Aufsatz über Prototypen schreiben. (Ich werde den Link anhängen, wenn es fertig ist)

Konstruktorvererbung

//Der Konstruktor erbt die Funktion Teacher (Name, Alter) {
    Person.call(dies, Name, Alter);
}

var t1 = neuer Lehrer('B', 22);
var t2 = neuer Lehrer('C', 30);
console.log(t1.name);//B
console.log(t2.name);//C
console.log(t1 Instanz von Person); //false
console.log(t1 Instanz von Lehrer);//true
t1.sayHi(); //TypeError: t1.sayHi ist keine Funktion
t2.sayHi(); //TypeError: t1.sayHi ist keine Funktion

Vorteil

Im Vergleich zur Prototypenvererbung löst die Konstruktorvererbung das Problem, dass alle Unterklasseninstanzen einen einheitlichen Prototyp gemeinsam nutzen. Sie kann auch Parameter an den Konstruktor der übergeordneten Klasse übergeben, und wir können mehrere Konstruktoren der übergeordneten Klasse im Konstruktor der Unterklasse aufrufen, um die sogenannte Mehrfachvererbung zu erreichen (hier bedeutet Mehrfachvererbung, dass die Unterklasse den Konstruktor der übergeordneten Klasse über Methoden wie call und apply aufruft, damit er die Eigenschaften und Methoden der übergeordneten Klasse hat, aber es gibt in js nur einen Prototyp für ein Funktionsobjekt, sodass wir Mehrfachvererbung nicht wirklich über die Form einer Prototypenkette abbilden können).

Mangel

Aus dem obigen Code können wir erkennen, dass die erstellte Instanz nur eine Instanz der Unterklasse ist, nicht eine Instanz der übergeordneten Klasse, was die Vererbung nicht intuitiv widerspiegeln kann. Diese Vererbungsmethode kann die Eigenschaften und Methoden des Prototyps der übergeordneten Klasse nicht erben.

Kombinatorische Vererbung

//Kombinierte Vererbungsfunktion Lehrer (Name, Alter) {
    Person.call(dies, Name, Alter);
}

Lehrer.Prototyp = neue Person();
Lehrer.prototype.constructor = Lehrer;


var t1 = neuer Lehrer('B', 22);
var t2 = neuer Lehrer('C', 30);
Lehrer.Prototyp.name = "D";
console.log(t1.name);//B
console.log(t2.name);//C
t1.sayHi();//Hallo, ich bin B und 22 Jahre alt!
t2.sayHi();//Hallo, ich bin C und 30 Jahre alt!
console.log(t1 Instanz von Person);//true
console.log(t1 Instanz von Lehrer);//true

Die kombinatorische Vererbung kombiniert die Vorteile der Prototypenvererbung und der Konstruktorvererbung und löst einige der Mängel der beiden Methoden. Wir werden jedoch feststellen, dass wir jedes Mal, wenn wir eine Unterklasseninstanz erstellen, eine Instanz der übergeordneten Klasse erstellen. Obwohl die Instanz der übergeordneten Klasse nicht dieselbe Instanz ist (die Speicheradresse ist unterschiedlich), sind ihre Eigenschaften und Methoden genau gleich. Daher verbessern wir sie durch die folgende Methode (parasitäre Kombinationsvererbung), um unnötige Instanzkonstruktionen zu vermeiden.

Parasitäre kompositorische Vererbung

//parasitäre Kombination Vererbungsfunktion Lehrer (Name, Alter) {
    Person.call(dies, Name, Alter);
}

Lehrer.Prototyp = Objekt.erstellen(Person.Prototyp);
Lehrer.prototype.constructor = Lehrer;


var t1 = neuer Lehrer('B', 22);
var t2 = neuer Lehrer('C', 30);
Lehrer.Prototyp.name = "D";
console.log(t1.name);//B
console.log(t2.name);//C
t1.sayHi();//Hallo, ich bin B und 22 Jahre alt!  
t2.sayHi();//Hallo, ich bin C und 30 Jahre alt!
console.log(t1 Instanz von Person);//true
console.log(t1 Instanz von Lehrer);//true 

Die obige Methode löst das Problem, dass wir eine übergeordnete Klasseninstanz erstellen, ohne eine untergeordnete Klasseninstanz zu erstellen. Dies ist auch die am häufigsten verwendete JS-Vererbungsmethode. Wenn wir Babel verwenden, um die Klassenvererbung in ES6 in ES5-Code umzuwandeln, werden wir feststellen, dass parasitäre Kombinationsvererbung verwendet wird.

Zusammenfassen

Damit ist dieser Artikel über native Javascript-Vererbungsmethoden und ihre Vor- und Nachteile abgeschlossen. Weitere Informationen zu nativen Javascript-Vererbungsmethoden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!