Eine kurze Diskussion zur Implementierung der Vererbung in Javascript_Javascript-Kenntnissen

S1: Alles in js ist ein Objekt. Überlegen Sie, wie wir die Vererbung der Eigenschaften und Methoden des übergeordneten Objekts zunächst so implementieren würden

function Parent(){
   this.name='123';
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
console.log('Name :'+son.getName()+';Age: '+son.getAge());
 
 
VM1777:16 Name :123;Age: 20

Wie Sie oben sehen können, besteht die Vererbung von Parent hauptsächlich darin, den Prototyp von Son zu überschreiben, sodass die Eigenschaften und Methoden von Parent an den Prototyp von Son weitergegeben werden. Auf diese Weise werden die Objekte durch den neuen Sohn erstellt () erbt alle Eigenschaften und Methoden vom Prototyp [d. h. dem übergeordneten Objekt Parent], wodurch der Vererbungseffekt erzielt wird. Dies führt jedoch zu einem Nebeneffekt, nämlich wenn das übergeordnete Objekt Referenztypattribute enthält Das untergeordnete Objekt ändert die Referenztypdaten und wirkt sich auf alle Unterobjekte aus. Dies ist offensichtlich nicht der Effekt, den wir benötigen:

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple", "pear"]

S2: Der aktuelle Gedanke zur Lösung dieses Problems besteht darin, dafür zu sorgen, dass jedes untergeordnete Objekt eine Kopie der Attribute des übergeordneten Objekts hat. Auf diese Weise werden beim Ändern der Attribute nur die Attribute unter dem untergeordneten Objekt geändert, ohne dass sich dies auf die Attribute auswirkt anderer untergeordneter Objekte. Dieses Ziel wird erreicht, indem auf frühere Methoden der Objektimitation

zurückgegriffen wird

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple"]

Ich habe Parent.call(this) zur Son-Funktion oben hinzugefügt, um so zu tun, als ob dies [das neue Son-Objekt] der Kontext this in der Parent-Funktion ist, um die Parent()-Funktion während new Son() aufzurufen, also haben wir Wir haben eine Kopie der Eigenschaften und Methoden des übergeordneten Objekts erhalten. Wenn wir also als nächstes die Eigenschaften und Methoden des übergeordneten Objekts ändern, handelt es sich tatsächlich um eine geänderte Kopie, sodass der Effekt erzielt wird, dass nicht alle untergeordneten Objekte betroffen sind. Aber durch die Verwendung von Son.prototype=new Parent() erhalten wir die Attribute und Methoden von zwei Instanzen. Nachdem wir die Kopien erhalten haben, benötigen wir nur den Prototyp des übergeordneten Objekts Benötige nur den Prototyp getname();

in

S3: Der nächste Schritt besteht darin, die Attribute und Methoden einer Instanz zu entfernen. Hier kommt der Konstruktor ins Spiel, um den Parent.prototype in ein natives Objekt als Prototyp des untergeordneten Objekts zu rekonstruieren . Dann verweisen Sie den Konstruktor auf den Unterkonstruktor

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
function Extend(Parent,Son){
   var proto = new Object(Parent.prototype);
   proto.constructor = Son;
   Son.prototype=proto;
}
Extend(Parent,Son);
Son.prototype.getAge=function(){
   return this.age;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.