Wie gut wissen Sie über die Vererbung in JavaScript?

Vorwort

Wie gut kennen Sie sich mit Vererbung aus? Welche Art der Vererbung ist die beste? Lassen Sie uns einige wichtige Punkte zur Vererbung kennenlernen und Ihnen den Implementierungsprozess sowie die Vor- und Nachteile zeigen.

Die Beziehung zwischen Konstruktor, Prototypobjekt und Instanzobjekt

Wenn Sie zunächst ihre Beziehung verstehen, können Sie die Vererbung besser verstehen

Vererbung von Prototypketten

Kern: Instanz der übergeordneten Klasse als Prototyp der untergeordneten Klasse verwenden

Code-Implementierungsprozess:

Funktion Übergeordnet(Name){
    dieser.name = Name || 'xt',
    dies.arr = [1]
}
Funktion Sohn(Alter){
    this.age = Alter
}
Parent.prototype.say = function() { //Definieren Sie die Methoden, die im Prototyp der übergeordneten Klasse wiederverwendet und gemeinsam genutzt werden müssen console.log('hello');
}
Sohn.Prototyp = neues übergeordnetes Element()
sei s1 = neuer Sohn(18)
sei s2 = neuer Sohn(19)
console.log(s1.say() === s2.say()); //wahr
console.log(s1.name,s1.alter); //xt 18
console.log(s2.name,s2.alter); //xt 19
s1.arr.push(2)
konsole.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]

Vorteil:

Die Attribute, die eine Instanz erben kann, sind: die Attribute des Konstruktors der Instanz, die Attribute des Konstruktors der übergeordneten Klasse und die Attribute des Prototyps der übergeordneten Klasse. (Die neue Instanz erbt nicht die Eigenschaften der Instanz der übergeordneten Klasse!)

Mangel:

• Die Instanz der Unterklasse teilt die Referenzeigenschaften des Konstruktors der übergeordneten Klasse, z. B. die arr-Eigenschaft (die Eigenschaften des Prototyps werden geteilt, und wenn eine Instanz die Prototypeigenschaft ändert, wird auch die Prototypeigenschaft der anderen Instanz geändert!)
• Parameter können nicht an den Konstruktor der übergeordneten Klasse übergeben werden

Konstruktorvererbung ausleihen

Kern: Verwenden Sie den Konstruktor der übergeordneten Klasse, um die Instanz der untergeordneten Klasse zu erweitern. Dies entspricht dem Kopieren der Instanzattribute der übergeordneten Klasse in die untergeordnete Klasse.

Code-Implementierung:

Funktion Übergeordnet(Name) {
    dieser.name = Name;
    dies.arr = [1],
    dies.sagen = function() { console.log('hallo') }
}
Funktion Sohn(Name, Alter) {
    Parent.call(this, name) //Kopiert die Instanzeigenschaften und Methoden der übergeordneten Klasse this.age = age
}
sei s1 = neuer Sohn('Sohn', 18)
sei s2 = neuer Sohn('Xiaoming', 19)
console.log(s1.say === s2.say) //false Methoden können nicht wiederverwendet werden. Methoden sind unabhängig, nicht gemeinsam genutzt. console.log(s1.name, s1.age); //Xiao Tan 18
console.log(s2.name, s2.age); //Xiaoming19
s1.arr.push(2)
console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ]

Vorteil:

• Es erbt nur die Eigenschaften des Konstruktors der übergeordneten Klasse, nicht die Eigenschaften des Prototyps der übergeordneten Klasse.
• Kann mehrere Konstruktoreigenschaften erben (mehrere aufrufen)
• In der Kindinstanz können Parameter an die Elterninstanz übergeben werden.

Mangel:

• Eigenschaften können nur vom Konstruktor der übergeordneten Klasse erben.
• Eine Wiederverwendung des Konstruktors ist nicht möglich. (Sie müssen es bei jeder Verwendung erneut aufrufen.)
• Jede neue Instanz verfügt über eine Kopie des aufgeblähten Konstruktors der übergeordneten Klasse.

Prototypische Vererbung

Kern: Umschließt ein Objekt mit einer Funktion und gibt den Aufruf dieser Funktion zurück. Diese Funktion wird zu einer Instanz oder einem Objekt, das nach Belieben Attribute hinzufügen kann.

Funktion Übergeordnet(Name) {
    dieser.name = "xt";
    dies.arr = [1]
}
Funktionsobjekt (Objekt) {
    Funktion F(){}
    F.Prototyp = Objekt;
    gib neues F() zurück;
  }
let s1 = neues übergeordnetes Objekt
s1.name = "Xiaoming"
s1.arr.push(2)
let s2 = neues übergeordnetes Objekt
console.log(s1.name,s2.name); // Xiaoming xt
console.log(s1.arr, s2.arr); //[ 1, 2 ] [ 1 ]

Mangel:

• Alle Instanzen erben die Eigenschaften des Prototyps und können keine Parameter übergeben.
• Eine Wiederverwendung ist nicht möglich. (Neue Instanzattribute werden später hinzugefügt)

Parasitäre Vererbung

Kern: Basierend auf der Vererbung von Prototypen, Erweitern des Objekts und Zurückgeben des Konstruktors

Funktion Übergeordnet(Name) {
    dieser.name = "xt";
    dies.arr = [1]
}
Funktionsobjekt (Objekt) {
    Funktion F(){}
    F.Prototyp = Objekt;
    gib neues F() zurück;
  }
let Sohn = neues übergeordnetes Element()
Funktion Objekt hinzufügen(Objekt){
    var add = Objekt(Objekt)
    add.name = "Xiaobai"
    zurück hinzufügen
}
var s1 = Objekt hinzufügen(Sohn)
konsole.log(s1.name); //Xiaobai

Mangel:

• Der Prototyp ist unbenutzt und kann nicht wiederverwendet werden.
• Die Referenztypeigenschaften mehrerer von der Prototypkette geerbter Instanzen verweisen auf dasselbe, was zu Manipulationen führen kann.

Kombinierte Vererbung (kombinierte Prototypkettenvererbung und geliehene Konstruktorvererbung)

Kern: Durch den Aufruf des Konstruktors der übergeordneten Klasse werden die Eigenschaften der übergeordneten Klasse übernommen und die Vorteile der Parameterübergabe bleiben erhalten. Durch die Verwendung der Instanz der übergeordneten Klasse als Prototyp der untergeordneten Klasse wird dann die Wiederverwendung von Funktionen erreicht.

Code-Implementierung:

Funktion Übergeordnet(Name) {
    dieser.name = Name;
    dies.arr = [1]
}
Parent.prototype.say = Funktion () { console.log('Hallo') }
Funktion Sohn(Name, Alter) {
    Parent.call(this, name) // Zweites Mal this.age = age
}
Parent.prototype = neuer Sohn() // einmal let s1 = neuer Sohn('小谭', 18)
sei s2 = neuer Sohn('Xiaoming', 19)
console.log(s1.say === s2.say) // wahr
console.log(s1.name, s1.alter); //Xiao Tan 18
console.log(s2.name, s2.age); //Xiaoming19
s1.arr.push(2)
console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ] teilt nicht die Referenzeigenschaft der übergeordneten Klasse.

Vorteil:

• Vorteile der Beibehaltung des Konstruktors: Beim Erstellen einer Unterklasseninstanz können Sie Parameter an den Konstruktor der übergeordneten Klasse übergeben.
• Vorteile der Beibehaltung der Prototypenkette: Die Methoden der übergeordneten Klasse werden auf dem Prototypobjekt der übergeordneten Klasse definiert, wodurch eine Wiederverwendung der Methoden erreicht werden kann.
• Referenzeigenschaften der übergeordneten Klasse werden nicht geteilt. Beispielsweise das arr-Attribut

Mangel:

• Da der Konstruktor der übergeordneten Klasse zweimal aufgerufen wird, entsteht ein redundantes Instanzattribut der übergeordneten Klasse.

Parasitäre kombinatorische Vererbung

Kern: Kombination von geliehenen Konstruktoren zur Parameterübergabe und parasitären Mustern zur Erzielung von Vererbung

Funktion Übergeordnet(Name){
    dieser.name = Name || 'xt',
    dies.arr = [1]
}
Funktion Sohn(Name,Alter){
    Parent.call(diesen,Name) // Kern
    this.age = Alter
}
Übergeordnet.Prototyp.say = Funktion() {  
    console.log('hallo');
}
Son.prototype = Object.create(Parent.prototype) // Der Kern erstellt ein Zwischenobjekt und der Prototyp der untergeordneten Klasse und der Prototyp der übergeordneten Klasse werden isoliert.
Sohn.prototype.constructor = Sohn
let p1 = neues übergeordnetes Element()

sei s1 = neuer Sohn("Xiaohong",18)
lass s2 = neuer Sohn("Sohn",19)
console.log(p1.constructor); //[Funktion: Übergeordnet]
console.log(s1.constructor); // [Funktion: Sohn]
console.log(s1.say() === s2.say()); //wahr
console.log(s1.name,s1.alter); // Xiaohong 18
console.log(s2.name,s2.age); //Kleines Schwarzes 19
s1.arr.push(2)
konsole.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]

Die parasitäre Zusammensetzungsvererbung kann als die beste Vererbung der Referenztypvererbung angesehen werden

Zusammenfassen

Dies ist das Ende dieses Artikels über JS-Vererbung. Weitere Informationen zur JS-Vererbung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!