Dieser Artikel beschreibt den JavaScript -Vererbungsmechanismus. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Für Anfänger ist es im Allgemeinen schwierig, den Vererbungsmechanismus der JavaScript -Sprache zu verstehen. Es hat weder das Konzept der "Unterklasse" und "Elternklasse", noch hat es die Unterscheidung zwischen "Klasse" und "Instanz". Es stützt sich ausschließlich auf ein sehr seltsames "Prototyp -Ketten" -Modell, um die Vererbung zu erreichen.
Ich habe viel Zeit damit verbracht, diesen Teil zu studieren und viele Notizen zu machen. Aber sie sind alle erzwungene Erinnerungen und können nicht grundlegend verstanden werden.
1. wie man eine Klasse erstellt
Angenommen, es gibt eine Klasse namens Person wie folgt:
Kopieren Sie den Code wie folgt: var Person = Funktion (Name, Alter) {
this.name = name;
this.age = Alter;
}
Person.Prototype.getName = function () {
kehre diesen namennamen zurück;
}
Wie oben erwähnt: Person repräsentiert alle Menschen auf der Erde, und jeder hat diese beiden grundlegenden Attribute: Name und Alter; Jetzt wollen wir eine Schülerklasse implementieren, und dann wissen wir; Die Schüler sind auch eine Person, und die Schüler haben auch Attribute wie Name und Alter; Die Frage ist jetzt, wie wir diese Beziehung aufbauen können.
Schauen wir uns zunächst an, wie reine objektorientierte Sprachen dies tun (wie z. B. ActionsScript3)
Kopieren Sie den Code wie folgt: Klassenschüler erweitern die Person {}; // Es ist sehr einfach, eine Codezeile; genauer sein, ein Wort-fordern
2. Wie kann ich es tun, wenn ich es in JS ändere
Bevor Sie die Implementierung des JS -Vererbungsmechanismus erläutern, verstehen wir zunächst die Prototyp -Kette von JS:
Die Codekopie lautet wie folgt: var person = new Person ('ausgeglichene FLW', 21);
Person.getName (); // "ausgeglichene FLW"
Wie wird die obige GetName () -Methode betrifft, wie es ausgeführt wird? Zunächst werden Sie feststellen, ob die Person -Funktion eine GetName () -Methode gibt und nein findet. Dann gehen Sie zu Person.Prototyp, um zu suchen und zu finden, dass es gibt! Nennen Sie es dann, was ist, wenn es nicht der Fall ist? Folgen Sie weiterhin dieselbe Methode und suchen Sie den Prototyp entlang, bis Sie die Methode finden oder die Oberseite der Prototyp -Kette erreichen!
Zum Beispiel gibt es jetzt einen Konstruktor namens Hund, der den Prototyp eines Hundefjekts darstellt.
Kopieren Sie den Code wie folgt: Funktionshund (Name) {
this.name = name;
}
Die Verwendung von Neuen für diesen Konstruktor erzeugt eine Instanz des Hundeobjekts.
Die Codekopie lautet wie folgt: var doga = neuer Hund ('Big Hair');
Alert (Doga.Name); // große Haare
Achten Sie auf dieses Schlüsselwort im Konstruktor, das das neu erstellte Instanzobjekt darstellt.
3. Nachteile des neuen Betreibers
Es gibt einen Nachteil bei der Verwendung von Konstruktoren, um Instanzobjekte zu generieren, dh die Fähigkeit, Attribute und Methoden zu teilen.
Setzen Sie beispielsweise im Konstruktor des Hundeobjekts die gemeinsame Attributspezies eines Instanzobjekts.
Kopieren Sie den Code wie folgt: Funktionshund (Name) {
this.name = name;
this.species = 'canidae';
}
Dann werden zwei Instanzobjekte generiert:
Die Codekopie lautet wie folgt: var doga = neuer Hund ('Big Hair');
var dogb = neuer Hund ('Eimao');
Die Artenattribute dieser beiden Objekte sind unabhängig und modifizieren den anderen nicht.
Die Codekopie lautet wie folgt: doga.species = 'weiblich';
Alert (Dogb.Species); // "Canine Family" zeigen, nicht von Doga betroffen
Jedes Instanzobjekt hat seine eigene Kopie seiner Eigenschaften und Methoden. Dies kann nicht nur Daten ausgetauscht, sondern auch eine enorme Verschwendung von Ressourcen.
Also: Vererbungsidee: Implementieren Sie den Vererbungsmechanismus durch die einzigartige Prototyp -Kette von JS!
4. Vererbung basierend auf der Prototypkette
1. Direkter Erbschaft und Umsetzung
Kopieren Sie den Code wie folgt: var students = Funktion (Name, Alter, SID) {
Person.Call (this, Name, Alter);
this.sid = sid;
}
Students.Prototype = new Person (); // Personal in die Prototypenkette von Studenten setzen, um den Erbschaftsmechanismus umzusetzen
Studenten.Prototype.Constructor = Studenten;
Students.prototype.getResults = function () {
// Holen Sie sich die Noten der Schüler
}
Es ist notwendig, die Schüler nicht zu verpassen. Wenn ein Konstruktor definiert wird, ist sein Standardprototyp eine Objektinstanz, und dann wird das Konstruktorattribut des Prototyps automatisch auf die Funktion selbst eingestellt! ! ! Wenn der Prototyp manuell auf ein anderes Objekt eingestellt ist, hat das neue Objekt natürlich nicht den Konstruktorwert des ursprünglichen Objekts, sodass sein Konstruktorattribut zurückgesetzt werden muss. wie:
Kopieren Sie den Code wie folgt: var test = function () {
thattime = "jetzt";
}
console.log (test.prototype); // Objekt {} ein leeres Objekt
console.log (test.prototype.Constructor); // function () {this.time = "now";} und die Funktion selbst
// Wenn Sie die Prototyp -Eigenschaft des Tests manuell ändern
Test.prototype = {
SONDERFUNC: FUNKTION () {
console.log ('Hallo Welt!');
}
};
console.log (test.prototype.Constructor); // Funktion Object () {[nativer Code]}
// Dann werden Sie feststellen, dass das Zeigungsverhältnis völlig falsch ist. Wenn Sie also die Prototyp -Eigenschaft manuell ändern, müssen Sie den Konstruktor -Zeigepunkt ändern.
Nach dem obigen Test wissen Sie, warum Sie den Konstruktorwert ändern müssen.
2. Die erbsige Funktionskapselung erweitert sich
Kopieren Sie den Code wie folgt: Funktion erweitern (Unterklasse, Superklasse) {
var f = function () {};
F.Prototype = SuperClass.Prototype;
subclass.Prototype = new f ();
subclass.Prototype.Constructor = subclass;
}
Tatsächlich ist die Funktion dieser Funktion nur eine Einkapselung des obigen Vererbungsprozesses, und die Unterschiede sind:
Es erbelt nur das Prototypattribut der Superklasse und erbt nicht die Attribute im Superklasse -Konstruktor;
Der Vorteil davon ist, den Overhead of New Constructor zu verringern!
Das nachfolgende Problem ist natürlich, dass Sie diese Funktion nicht einfach übergeben können, damit die Unterklasse alle Eigenschaften der Superklasse erben kann
verbessern:
Kopieren Sie den Code wie folgt: // Fügen Sie dem Studentenkonstruktor weiterhin eine Codezeile hinzu:
Person.Call (this, Name, Alter);
5. Zusammenfassung
Mit dem Prototyp -Kettenprinzip von JS können wir den JS -Vererbungsmechanismus leicht implementieren. Obwohl es nicht sehr streng ist, wurde mein Ziel erreicht: Versuchen Sie, sich einmal wieder aufzunehmen!
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.