Die Vererbung in js kann in zwei Typen unterteilt werden: Objektidentitätswechsel und Prototypenverkettung.
1. Der Objektidentitätswechsel umfasst drei Typen : temporäre Attributmethode, call() und apply()-Methode
1. Temporäre Attributmethode
Kopieren Sie den Codecode wie folgt:
Funktion Person(Name){
this.name = Name;
this.say = function(){
Alert('Mein Name ist '+dieser.name);
}
}
Funktion F2E(name,id){
this.temp = Person;
this.temp(name);
lösche this.temp;
this.id = id;
this.showId = function(){
Alert('Guten Morgen, Sir, meine Arbeitsnummer ist '+this.id);
}
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();
2.call()/apply()-Methode
Im Wesentlichen ändert es den Zeiger dieses Zeigers.
Kopieren Sie den Codecode wie folgt:
Funktion Person(Name){
this.name = Name;
this.say = function(){
Alert('Mein Name ist '+dieser.name);
}
}
Funktion F2E(name,id){
Person.call(this,name); //apply()-Methode geändert in Person.apply(this,new Array(name));
this.id = id;
this.showId = function(){
Alert('Guten Morgen, Sir, meine Arbeitsnummer ist '+this.id);
}
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();
Nachteile: Schauen wir uns zunächst dieses Speicherzuordnungsdiagramm an:
Im OO-Konzept bildet das Objekt nach der Instanziierung einen eigenen Raum im Heapspeicher. Es ist erwähnenswert, dass dieses Codesegment. Die Mitgliedsmethoden sind in diesem Codesegment vorhanden und werden gemeinsam genutzt. Das Problem besteht darin, dass bei der Vererbung durch Objektidentitätswechsel alle Mitgliedsmethoden darauf verweisen. Das heißt, dass jede Instanz diese Mitgliedsmethode nicht gemeinsam nutzt, was zu einer großen Speicherverschwendung führt. Und durch Objektidentitätswechsel können durch Prototypen definierte Variablen und Methoden nicht vererbt werden. Beispielsweise verursacht der folgende Code einen Fehler:
Kopieren Sie den Codecode wie folgt:
Funktion Person(Name){
this.name = Name;
this.say = function(){
Alert('Mein Name ist '+dieser.name);
}
}
Person.prototype.age = 20;
Person.prototype.sayAge = function(){alert('Mein Alter ist '+this.age)};
Funktion F2E(name,id){
Person.apply(this,new Array(name));
this.id = id;
this.showId = function(){
Alert('Guten Morgen, Sir, meine Arbeitsnummer ist '+this.id);
}
}
var simon = new F2E('Simon',9527);
simon.sayAge(); //Prompt TypeError: simon.sayAge ist keine Funktion
2. Prototypenkettenmethode
Kopieren Sie den Codecode wie folgt:
Funktion Person(){
this.name = 'Simon';
}
Person.prototype.say = function(){
Alert('Mein Name ist '+dieser.name);
}
Funktion F2E(id){
this.id = id;
this.showId = function(){
Alert('Guten Morgen, Sir, meine Arbeitsnummer ist '+this.id);
}
}
F2E.prototype = neue Person();
var simon = new F2E(9527);
simon.say();
simon.showId();
Alert(simon.hasOwnProperty('id')); //Überprüfen Sie, ob es sich um eine eigene Eigenschaft handelt
Befolgen Sie als Nächstes das obige Beispiel, um die folgenden Konzepte der js-Prototypkette zu verstehen:
Die Prototypenkette kann wie folgt verstanden werden: Jedes Objekt in js verfügt über ein verstecktes __proto__-Attribut eines instanziierten Objekts, und diese Prototypenmethode kann einem anderen Instanziierungsobjekt zugewiesen werden Dieses Objekt muss auf seine Klasse verweisen und so eine Kette bilden
Kopieren Sie den Codecode wie folgt:
F2E.prototype = neue Person()
Dieser Satz ist der Schlüssel. Wenn ein js-Objekt ein bestimmtes Attribut liest, sucht es zunächst nach seinen eigenen Attributen. Wenn keine Attribute vorhanden sind, sucht es dann nach den Attributen des Objekts in der Prototypenkette. Mit anderen Worten, die Methoden der Prototypkette können gemeinsam genutzt werden, wodurch das Problem der Objektidentität und der Speicherverschwendung gelöst wird.
Kommen wir nun zu den Nachteilen:
Der Nachteil liegt auf der Hand. Die Vererbung der Prototypenkette bedeutet, dass beim Instanziieren einer Unterklasse keine Parameter übergeben werden können. Deshalb hat die Funktion Person() in diesem Beispiel keine Parameter und wird direkt als this.name="Simon" geschrieben. Der folgende Code wird nicht den gewünschten Effekt erzielen:
Kopieren Sie den Codecode wie folgt:
Funktion Person(Name){
this.name = Name;
}
Person.prototype.say = function(){
Alert('Mein Name ist '+dieser.name);
}
Funktion F2E(name,id){
this.id = id;
this.showId = function(){
Alert('Guten Morgen, Sir, meine Arbeitsnummer ist '+this.id);
}
}
F2E.prototype = neue Person();
var simon = new F2E("Simon",9527);
simon.say();
simon.showId();
Funktion Person(Name){
this.name = Name;
}
Person.prototype.say = function(){
Alert('Mein Name ist '+dieser.name);
}
Funktion F2E(name,id){
this.id = id;
this.showId = function(){
Alert('Guten Morgen, Sir, meine Arbeitsnummer ist '+this.id);
}
}
F2E.prototype = new Person(); //Wert kann hier nicht übergeben werden, weder this.name noch name funktionieren. Es ist möglich, F2E.prototype = new Person('wood') direkt zu schreiben, aber in diesem Fall Simon. say( ) wird zu My name is wood
var simon = new F2E("Simon",9527);
simon.say(); //Popup Mein Name ist undefiniert
simon.showId();
Lassen Sie mich abschließend zusammenfassen, was meiner Meinung nach eine bessere Möglichkeit ist, Vererbung zu implementieren. Mitgliedsvariablen verwenden Objektidentitätswechsel und Mitgliedsmethoden verwenden Prototypenverkettung. Der Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
Funktion Person(Name){
this.name = Name;
}
Person.prototype.say = function(){
Alert('Mein Name ist '+dieser.name);
}
Funktion F2E(name,id){
Person.call(this,name);
this.id = id;
}
F2E.prototype = neue Person();
//Beachten Sie hier ein Detail: showId kann nicht vor F2E.prototype = new Person(); geschrieben werden.
F2E.prototype.showId = function(){
Alert('Guten Morgen, Sir, meine Arbeitsnummer ist '+this.id);
}
var simon = new F2E("Simon",9527);
simon.say();
simon.showId();