Zusammenfassung der Verwendung der Vererbung in Javascript_Javascript-Kenntnissen

Die Beispiele in diesem Artikel fassen die Verwendung der Vererbung in JavaScript zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Beispiel:

Code kopieren Der Code lautet wie folgt:

/**
* Implementieren Sie die Unterklasse, um die übergeordnete Klasse zu erben, generieren Sie jedoch keine redundanten Attribute und Methoden
* @returns {Function}
*/
define(function(){
Rückgabefunktion(subType, superType){
var proto = neues Objekt(superType.prototype);
proto.constructor = subType;
subType.prototype = proto;
};
});
//————————————————————————
define(function(){
Funktions-Ostring(s)
{
this.str = s;
this.length = this.str.length;
}
ostring.prototype.show = function(){
alarm(this.str);
};
return ostring;
});
//————————————————————————
define(['inherit', 'ostring'], function(inherit, ostring){
Funktionswstring(s){
//Verwenden Sie call, um den Konstruktor der übergeordneten Klasse aufzurufen
ostring.call(this, s);
this.chlength = 2 * s.length;
}
//Andere Attribute erben
inherit(wstring, ostring);
wstring.prototype.add = function(w)
{
alarm(this.str w);
};
return wstring;
});

Schauen Sie sich das Beispiel noch einmal an
1. Verwenden Sie die Funktion zur Implementierung:

Code kopieren Der Code lautet wie folgt:

Funktion Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Geben Sie diesen.Namen zurück;
}
Funktion Autor(Name, Bücher) {
This.inherit=person;
This.inherit(name);
This.books = Bücher;
 
}
var au=new Author("dororo","Learn much");
au.name

Oder gleichwertig:

Code kopieren Der Code lautet wie folgt:

Funktion Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Geben Sie diesen.Namen zurück;
}
Funktion Autor(Name, Bücher) {
Person.call(this, name);
This.books = Bücher;
 
}
var au=new Author("dororo","Learn much");
au.getName

Da dies lediglich als Parameter verwendet wird, der Konstruktor der übergeordneten Klasse Person aufgerufen wird und alle der übergeordneten Klasse zugewiesenen Felder der Unterklasse „Autor“ zugewiesen werden, werden keine anderen definierten Felder (Prototypen) als der Konstruktor der übergeordneten Klasse Person definiert von der Unterklasse verwendet wird, wird vererbt. Im obigen Beispiel ist au.getName also undefiniert, da getName im Person-Prototypobjekt definiert ist.

Darüber hinaus muss der Konstruktor der Unterklasse den Konstruktor der übergeordneten Klasse aufrufen, bevor er seine eigene Domäne definiert, um zu verhindern, dass die Definition der Unterklasse von der übergeordneten Klasse überschrieben wird. Mit anderen Worten: Das vom Autor definierte Attributbuch muss nach Person.call stehen, andernfalls wird es durch die Attribute in Person überschrieben. Gleichzeitig ist es am besten, den Prototyp nicht zum Definieren des Funktionsbereichs der Unterklasse in der Unterklasse zu verwenden, da nach der Neu- und Instanziierung einer Unterklasse der Prototyp ausgeführt werden muss und dann der Konstruktor der übergeordneten Klasse aufgerufen wird. Das ist auch einfach Die Attribute der übergeordneten Klasse werden überschrieben.

2. Verwenden Sie den Prototyp zur Implementierung:

Code kopieren Der Code lautet wie folgt:

Funktion Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Geben Sie diesen.Namen zurück;
}
Funktion Autor(Name, Bücher) {
This.books = Bücher;
}
Author.prototype=new Person(name);
Author.prototype.constructor=Autor;
Author.prototype.getBooks = function() {
Geben Sie this.books;
zurück }
var au1=new Author("dororo1","Learn much");
var au2=new Author("dororo2","Learn less");
alarm(au1.getName());
alarm(au2.getName());

Diese Methode vermeidet das Problem, dass der Prototyp bei der Funktionsimplementierung nicht geerbt werden kann. Da die Instanz Author.prototype=new Person(name); new Person() den Person-Konstruktor und alle Eigenschaften des Prototyps aufruft. Der Nachteil besteht jedoch darin, dass Author.prototype bereits instanziiert wurde. Wenn also eine Unterklasse instanziiert wird, sind alle nicht grundlegenden Datentypen Referenzkopien. Im obigen Beispiel ist der von beiden Instanzen au1 und au2 zurückgegebene Wert also dororo1.

3. Verwenden Sie „Mischen“, um
zu erreichen

Code kopieren Der Code lautet wie folgt:

Funktion Person(name) {
This.name = name;
}
Person.prototype.getName = function() {
Geben Sie diesen.Namen zurück;
}
Funktion Autor(Name, Bücher) {
This.base = neue Person(name);
for(var key in this.base){
          if(!this[key]){
This[key]=this.base[key];
           }
           }
This.book=books;
}
var au1=new Author("dororo1","work");
var au2=new Author("dororo2","play");
alarm(au1.getName());
alarm(au2.getName());
au1.book;
au2.book;

Es ist eine Erweiterung und kopiert alle Felder der übergeordneten Klasse in die untergeordnete Klasse. Es gibt überhaupt keine Probleme mit den beiden oben genannten Aspekten.
Parasitärer Kombinationsmodus)

JS-Vererbung umfasst Attributvererbung und Methodenvererbung, die durch verschiedene Methoden implementiert werden.
1. Vererbung von Attributen

Die Vererbung von Attributen wird durch Ändern der Ausführungsumgebung der Funktion erreicht. Das Ändern der Ausführungsumgebung einer Funktion kann mit den Methoden call() und apply() erreicht werden.

Wir erstellen zunächst eine Tier-„Klasse“ (da es in JS kein Klassenkonzept gibt, handelt es sich hier nur um eine Simulation, es handelt sich eigentlich nur um ein Funktionsobjekt).

Code kopieren Der Code lautet wie folgt:

Funktion Animal(typeName) {
//Füge ein Attribut typeName
zur Ausführungsumgebung (this) der aktuellen Methode hinzu //Aber die Ausführungsumgebung (dies) kann nur bestimmt werden, wenn diese Funktion ausgeführt wird
this.typeName = typeName;
this.colors = ["red","while"];
}
//Möchten Sie dem Prototyp der Funktion
zwei (objektübergreifende) Methoden hinzufügen Animal.prototype.Shout = function () { Alert("Ich bin: --" this.typeName);};
Animal.prototype.Eat = function () { Alert("Ich bin: --" this.typeName) };
//--Definieren Sie eine Lion--"Klasse" (eigentlich eine Funktion)
Funktion Lion(tn) {
//--Führen Sie die Animal-Methode aus und ändern Sie die Ausführungsumgebung von Animal zu Lion's this
über den ersten Parameter von apply //In ähnlicher Weise kann dies bei Lion nur während der Ausführung festgestellt werden
Animal.apply(this,["Lion"]);//--Variable Attribute der übergeordneten Klasse geerbt, das ist neu, weil es Lion ist, das ist Lion
}
Lion.prototype = Animal.prototype; //Erben Sie die Methode der übergeordneten Klasse – aber dies ist nicht gut geschrieben. Wenn die Unterklasse eine Methode hinzufügt, ist dies eine Zeigerreferenz
Lion.prototype.Hunt = function () {
alarm("Ich bin: Löwe, ich möchte jagen~~·~");
}
var aminm = new Animal();
aminm.Hunt(); //---Sie können auf die Methoden der Unterklasse zugreifen, was nicht gut ist
//----Wie kann man dieses Problem lösen? ? ? ? ? ?
//---Lösung: Beim Vererben von Methoden können Sie so schreiben:
Lion.prototype = new Animal();// Erben Sie die Methode der übergeordneten Klasse und weisen Sie das Animal-Objekt dem Prototyp-Prototyp zu. Tatsächlich verfügt es auch über Attribute
var lion = new Lion(); // Zusätzlich zum Erstellen ändert das Schlüsselwort new auch die Ausführungsumgebung des Lion-Objekts zum Lion-Objekt selbst
// ---Mit anderen Worten, nachdem new abgeschlossen ist, ist dies in der Lion-Funktion die Lion-Funktion selbst, und dann wird die Lion-Funktion

aufgerufen

Analysieren Sie das neue Schlüsselwort:

Das neue Schlüsselwort ist sehr gut. Im obigen Code hat das neue Schlüsselwort die folgenden Aufgaben erledigt:
1) Heap-Speicherplatz öffnen, um die Speicherung von Lion-Objekten vorzubereiten
2) Ändern Sie die Ausführungsumgebung des Lion-Objekts selbst, sodass die Lion-Funktion auf das Lion-Funktionsobjekt selbst verweist.
3) Rufen Sie den „Konstruktor“ der Lion-„Klasse“ auf, um ein Lion-Objekt zu erstellen
4) Weisen Sie der Variablen l die Heap-Adresse des Lion-Funktionsobjekts zu. Zu diesem Zeitpunkt zeigt l auf das Lion-Funktionsobjekt
lion.Shout();
lion.Eat();
Diese Art der Vererbung hat jedoch einen Nachteil: Der Konstruktor der übergeordneten Klasse wird zweimal aufgerufen, einmal aufgerufen und dann erneut neu.

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