Detaillierte Erläuterung des Javascript-Vererbungsmechanismus. Beispiele_Javascript-Kenntnisse

Die Beispiele in diesem Artikel beschreiben den JavaScript-Vererbungsmechanismus. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Für Anfänger ist es im Allgemeinen schwierig, den Vererbungsmechanismus der Javascript-Sprache zu verstehen. Es gibt kein Konzept von „Unterklasse“ und „Elternklasse“ und es gibt keinen Unterschied zwischen „Klasse“ und „Instanz“. one Ein sehr eigenartiges „Prototypenketten“-Modell zur Implementierung der Vererbung.

Ich habe viel Zeit damit verbracht, diesen Teil zu studieren und mir viele Notizen gemacht. Aber es sind alles erzwungene Erinnerungen, die nicht grundsätzlich verstanden werden können.

1. So erstellen Sie eine Klasse

Angenommen, es gibt eine Klasse namens Person wie folgt:

Code kopieren Der Code lautet wie folgt:

var Person = function(name, age) {
This.name = name;
This.age = Alter;
}
Person.prototype.getName = function() {
Geben Sie diesen.Namen zurück;
}

Wie oben: Person repräsentiert alle Menschen auf der Erde, und jeder hat diese beiden grundlegenden Attribute: Name und Alter; B. Name und Alter. Die Frage ist nun, wie diese Beziehung hergestellt werden kann.
Schauen wir uns zunächst an, wie eine rein objektorientierte Sprache das macht (z. B. Actionscrpt3)

Code kopieren Der Code lautet wie folgt:

Klasse Schüler erweitern Person {}; //Sehr einfach, eine Zeile von Code; genauer: Sagen Sie, es ist ein Wort – erweitern

2. So geht's durch den Wechsel zu js

Bevor wir die Implementierung des Vererbungsmechanismus von js erklären, wollen wir zunächst die Prototypenkette von js verstehen:

Code kopieren Der Code lautet wie folgt:

var person = new Person('Poised-flw', 21);
person.getName(); // „Poised-flw“

Wie wird die obige getName()-Methode ausgeführt? Zuerst suche ich nach der Methode getName() in der Person-Funktion und stelle fest, dass es keine gibt. Dann gehe ich zu Person.prototype, um zu suchen und stelle fest, dass es eine gibt! Dann rufen Sie es an, was wäre, wenn nicht? Suchen Sie auf die gleiche Weise weiter entlang des Prototyps, bis Sie eine Methode finden oder die Spitze der Prototypenkette erreichen!

Zum Beispiel gibt es jetzt einen Konstruktor namens DOG, der den Prototyp des Hundeobjekts darstellt.

Code kopieren Der Code lautet wie folgt:

Funktion DOG(name){
　　this.name = name;
}

Durch die Verwendung von new in diesem Konstruktor wird eine Instanz des Hundeobjekts generiert.

Code kopieren Der Code lautet wie folgt:

　var dogA = new DOG('Big Hair');
alarm(dogA.name); // Da Mao

Achten Sie auf das Schlüsselwort this im Konstruktor, das das neu erstellte Instanzobjekt darstellt.

3. Nachteile des neuen Betreibers

Die Verwendung eines Konstruktors zum Generieren von Instanzobjekten hat den Nachteil, dass Eigenschaften und Methoden nicht gemeinsam genutzt werden können.
Legen Sie beispielsweise im Konstruktor des DOG-Objekts die allgemeinen Attributarten eines Instanzobjekts fest.

Code kopieren Der Code lautet wie folgt:

Funktion DOG(name){
　　this.name = name;
　　this.species = 'Canidae';
}

Generieren Sie dann zwei Instanzobjekte:

Code kopieren Der Code lautet wie folgt:

　var dogA = new DOG('Big Hair');
var dogB = new DOG('二毛');

Die Artenattribute dieser beiden Objekte sind unabhängig. Die Änderung eines von ihnen hat keinen Einfluss auf das andere.

Code kopieren Der Code lautet wie folgt:

dogA.species = 'Feline';
warning(dogB.species); // Anzeige „Hund“, nicht betroffen von dogA

Jedes Instanzobjekt verfügt über eine eigene Kopie von Eigenschaften und Methoden. Dies scheitert nicht nur am Datenaustausch, sondern stellt auch eine enorme Ressourcenverschwendung dar.

Also: Die Idee der Vererbung: Implementieren Sie den Vererbungsmechanismus durch die einzigartige Prototypenkette von js!

4. Vererbung basierend auf der Prototypenkette

1. Direkte Vererbungsimplementierung

Code kopieren Der Code lautet wie folgt:

var Students = function(name, age, sid) {
Person.call(this, name, age);
This.sid = sid;
}
Students.prototype = new Person(); //Setzen Sie Person in die Prototypenkette von Students ein, um den Vererbungsmechanismus zu implementieren
Students.prototype.constructor = Studenten;
Students.prototype.getResults = function() {
// Holen Sie sich die Noten der Schüler
}

Verpassen Sie auf keinen Fall die Zeile Students.prototype.constructor = Students! Beim Definieren eines Konstruktors ist sein Standardprototyp eine Objektinstanz, und dann wird die Konstruktoreigenschaft des Prototyps automatisch auf die Funktion selbst festgelegt! ! ! Wenn der Prototyp manuell auf ein anderes Objekt festgelegt wird, verfügt das neue Objekt natürlich nicht über den Konstruktorwert des ursprünglichen Objekts, sodass seine Konstruktoreigenschaften zurückgesetzt werden müssen. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var Test = function() {
This.time = "now";
}
console.log(Test.prototype); // Object {} ein leeres Objekt
console.log(Test.prototype.constructor); // function() {this.time = "now";} und die Funktion selbst
// Wenn Sie das Prototypattribut von Test
manuell ändern Test.prototype = {
SomeFunc: function() {
console.log('Hallo Welt!');
}
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// Dann werden Sie feststellen, dass Sie völlig falsch darauf hingewiesen haben. Wenn Sie also das Prototypattribut manuell ändern, müssen Sie seinen Konstruktorzeiger ändern Nach dem obigen Test wissen Sie, warum der Konstruktorwert geändert werden muss.

2. Geerbte Funktionen erweitern

Code kopieren Der Code lautet wie folgt:Funktion extend(subClass, superClass) {

var F = function() {};

F.prototype = superClass.prototype;
subClass.prototype = new F();
​ subClass.prototype.constructor = subClass;
}

Tatsächlich ist die Funktion dieser Funktion nur eine Kapselung des oben genannten Vererbungsprozesses. Die Unterschiede sind:

Es erbt nur das Prototypattribut von superClass und nicht die Attribute im superClass-Konstruktor;
Dies hat den Vorteil, dass die Kosten für die Erstellung eines neuen Konstruktors reduziert werden!
Das daraus resultierende Problem besteht natürlich darin, dass die Unterklasse nicht alle Attribute der Oberklasse allein über diese Funktion erben kann
Verbesserungen:

Kopieren Sie den Code Der Code lautet wie folgt: // Fügen Sie weiterhin eine Codezeile im Students-Konstruktor hinzu:

Person.call(this, name, age);

5. Zusammenfassung

Mit dem Prototypenkettenprinzip von js können wir den Vererbungsmechanismus von js problemlos implementieren. Obwohl er nicht sehr streng ist, wurde mein Ziel erreicht: Wiederholter Code sollte so oft wie möglich erscheinen!

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.