Zusammenfassung von 9 Vererbungsimplementierungsmethoden in JavaScript_Javascript-Kenntnissen

Im Gegensatz zu klassenbasierten Programmiersprachen wie C und Java erfolgt die Vererbung in JavaScript prototypbasiert. Da JavaScript eine sehr flexible Sprache ist, gibt es gleichzeitig viele Möglichkeiten, die Vererbung zu implementieren.

Das erste Grundkonzept betrifft Konstruktoren und Prototypketten. Der Konstruktor des übergeordneten Objekts heißt „Parent“, der Konstruktor des untergeordneten Objekts heißt „Child“ und die entsprechenden übergeordneten und untergeordneten Objekte heißen „Parent“ bzw. „Child“.

Es gibt ein verstecktes Attribut [[Prototyp]] (Achtung: nicht Prototyp). In Chrome ist es __proto__, aber in einigen Umgebungen ist es nicht zugänglich. Es verweist auf den Prototyp dieses Objekts. Beim Zugriff auf die Eigenschaften oder Methoden eines Objekts werden zuerst alle Eigenschaften des Objekts durchsucht. Wenn sie nicht gefunden werden, werden die Eigenschaften des Prototypobjekts Schritt für Schritt entlang der Prototypkette gemäß [[Prototyp]] durchsucht, bis sie gefunden werden. Andernfalls wird undefiniert zurückgegeben.

1. Prototypenkettenvererbung:

Die Prototypkette ist die Standardmethode zur Implementierung der Vererbung in JavaScript. Wenn Sie möchten, dass ein untergeordnetes Objekt das übergeordnete Objekt erbt, besteht die einfachste Möglichkeit darin, das Prototypattribut des Konstruktors des untergeordneten Objekts auf eine Instanz des übergeordneten Objekts zu verweisen:

Code kopieren Der Code lautet wie folgt:

Funktion Parent() {}
Funktion Child() {}
Child.prototype = new Parent()

Zu diesem Zeitpunkt wurde das Prototypattribut von Child neu geschrieben und zeigt auf ein neues Objekt, aber das Konstruktorattribut dieses neuen Objekts zeigt nicht korrekt auf Child. Die JS-Engine führt diese Arbeit nicht automatisch für uns durch, sodass wir sie manuell ausführen müssen Die Konstruktoreigenschaft des Prototypobjekts von Child verweist auf Child:

Code kopieren Der Code lautet wie folgt:

Child.prototype.constructor = Child

Das Obige ist der Standard-Vererbungsmechanismus in JavaScript, der die Eigenschaften und Methoden, die wiederverwendet werden müssen, auf das Prototypobjekt migriert und die nicht wiederverwendbaren Teile als eigene Eigenschaften des Objekts festlegt. Diese Vererbungsmethode erfordert jedoch eine neue Instanz als Prototypobjekt, das effizienter ist.

2. Prototypische Vererbung (Nicht-Prototyp-Kette):

Um das Problem der wiederholten Erstellung von Prototypobjektinstanzen in der vorherigen Methode zu vermeiden, können Sie den Prototyp des untergeordneten Objektkonstruktors direkt auf den Prototyp des übergeordneten Objektkonstruktors verweisen. Auf diese Weise werden alle Eigenschaften und Methoden in Parent .prototype kann auch wiederverwendet werden. Gleichzeitig ist es nicht erforderlich, wiederholt Prototypobjektinstanzen zu erstellen:

Code kopieren Der Code lautet wie folgt:

Child.prototype = Parent.prototype
Child.prototype.constructor = Child

Wir wissen jedoch, dass Objekte in JavaScript als Referenztypen existieren. Diese Methode verweist tatsächlich auf die in Child.prototype und Parent.prototype gespeicherten Zeiger Um die Vererbung später fortzusetzen, wird auch der Prototyp des übergeordneten Objekts neu geschrieben, da es hier immer nur eine Instanz des Prototypobjekts gibt, was auch das Manko dieser Vererbungsmethode ist.

3. Temporäre Konstruktorvererbung:

Um das oben genannte Problem zu lösen, können Sie einen temporären Konstruktor als Zwischenschicht verwenden. Alle Vorgänge am untergeordneten Objektprototyp werden auf der Instanz des temporären Konstruktors ausgeführt und haben keine Auswirkungen auf den übergeordneten Objektprototyp:

Code kopieren Der Code lautet wie folgt:

var F = function() {}
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = Child

Um gleichzeitig auf die Attribute im Prototyp der übergeordneten Klasse im untergeordneten Objekt zuzugreifen, können Sie im Konstruktor des untergeordneten Objekts ein Attribut hinzufügen, das auf den Prototyp des übergeordneten Objekts verweist, z. B. uber. Auf diese Weise kann das untergeordnete Objekt Der Zugriff erfolgt direkt über child.constructor.uber auf das übergeordnete Prototypobjekt.

Wir können die obige Arbeit in eine Funktion kapseln und durch den zukünftigen Aufruf dieser Funktion kann diese Vererbungsmethode problemlos implementiert werden:

Code kopieren Der Code lautet wie folgt:

Funktion verlängern(Kind, Eltern) {
var F = function() {}
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = Child
Child.uber = Parent.prototype
}

Dann kannst du es so nennen:

Code kopieren Der Code lautet wie folgt:

verlängern(Hund, Tier)

4. Attributkopie:

Diese Vererbungsmethode ändert grundsätzlich nicht die Beziehung der Prototypkette, sondern kopiert alle Attribute im übergeordneten Prototypobjekt direkt in den untergeordneten Objektprototyp. Natürlich gilt die Kopie hier nur für grundlegende Datentypen und Objekttypen unterstützt nur Pass-by-Reference.

Code kopieren Der Code lautet wie folgt:

Funktion extension2(Child, Parent) {
var p = Parent.prototype
var c = Child.prototype
für (var i in p) {
         c[i] = p[i]
}
c.uber = p
}

Diese Methode rekonstruiert einige Prototypattribute, was beim Erstellen von Objekten weniger effizient ist, aber die Suche in der Prototypenkette reduzieren kann. Ich persönlich bin jedoch der Meinung, dass die Vorteile dieser Methode nicht offensichtlich sind.

5. Vererbung zwischen Objekten:

Zusätzlich zur Vererbungsmethode zwischen Konstruktoren können Sie auch ohne Konstruktoren direkt zwischen Objekten erben. Das heißt, Objektattribute direkt kopieren, einschließlich flacher Kopie und tiefer Kopie.

Flache Kopie:
Akzeptieren Sie das zu vererbende Objekt, erstellen Sie gleichzeitig ein neues leeres Objekt, kopieren Sie die Eigenschaften des zu vererbenden Objekts in das neue Objekt und geben Sie das neue Objekt zurück:

Code kopieren Der Code lautet wie folgt:

Funktion extensionCopy(p) {
var c = {}
für (var i in p) {
         c[i] = p[i]
}
c.uber = p
Geben Sie c
zurück }

Nachdem der Kopiervorgang abgeschlossen ist, können die Attribute, die im neuen Objekt neu geschrieben werden müssen, manuell neu geschrieben werden.

Deep Copy:
Das Problem der flachen Kopie ist ebenfalls offensichtlich. Sie kann die Attribute des Objekttyps nicht kopieren, sondern nur die Referenz übergeben. Um dieses Problem zu lösen, muss eine tiefe Kopie verwendet werden. Der Schwerpunkt von Deep Copy liegt im rekursiven Aufruf von copy. Wenn die Eigenschaften des Objekttyps erkannt werden, wird das entsprechende Objekt oder Array erstellt und die Grundtypwerte werden nacheinander kopiert.

Code kopieren Der Code lautet wie folgt:

Funktion deepCopy(p, c) {
c = c ||. {}
für (var i in p) {
If (p.hasOwnProperty(i)) {
If (typeof p[i] === 'object') {
                                 c[i] = Array.isArray(p[i]) : {}
                 deepCopy(p[i], c[i])
              } sonst {
c[i] = p[i]
            }
}
}
Geben Sie c
zurück }

Eine ES5-Methode Array.isArray() wird verwendet, um zu bestimmen, ob der Parameter ein Array ist. Umgebungen, die diese Methode nicht implementieren, müssen einen Shim manuell kapseln.

Code kopieren Der Code lautet wie folgt:

Array.isArray = function(p) {
Gibt eine p-Instanz des Arrays
zurück }

Allerdings können Array-Variablen aus verschiedenen Frameworks nicht mit dem Operator „instanceof“ beurteilt werden, diese Situation ist jedoch relativ selten.

6. Prototypische Vererbung:

Erstellen Sie mit Hilfe des übergeordneten Objekts über den Konstruktor ein neues Objekt, das vom übergeordneten Objekt als Prototyp erstellt wurde:

Code kopieren Der Code lautet wie folgt:

objet de fonction (o) {
varn
Fonction F() {}
F.prototype = o
n = nouveau F()
n.uber = o
Retour n
>

Ici, l'objet parent est directement défini comme prototype de l'objet enfant. La méthode Object.create() dans ES5 est cette implémentation.

7. Utilisation mixte de l'héritage prototypique et de la copie d'attributs :

Dans la méthode d'héritage prototypique, l'objet enfant est construit sur la base de l'objet parent transmis. En même temps, en plus des propriétés fournies par l'objet parent, des objets supplémentaires qui doivent être copiés peuvent être transmis :

Copier le code Le code est le suivant :

function objectPlus(o, stuff) {
varn
Fonction F() {}
F.prototype = o
n = nouveau F()
n.uber = o

pour (var i dans les trucs) {
n[i] = trucs[i]
>
Retour n
>

8. Héritage multiple :

Cette méthode n'implique pas le fonctionnement de la chaîne de prototypes. Plusieurs objets dont les attributs doivent être copiés sont transmis et tous les attributs sont copiés dans l'ordre :

Copier le code Le code est le suivant :

fonction multi() {
var n = {}, trucs, je = 0,
        len = arguments.length
pour (i = 0; i < len; i ) {
        trucs = arguments[i]
pour (var clé dans les trucs) {
n[i] = trucs[i]
>
>
Retour n
>

Les objets sont copiés dans l'ordre selon l'ordre dans lequel ils sont transmis. Autrement dit, si l'objet transmis ultérieurement contient les mêmes propriétés que l'objet précédent, ce dernier écrasera le premier.

9. Emprunt constructeur :

Les méthodes call() et apply() en JavaScript sont très simples à utiliser, et leur fonction de modification du contexte d'exécution de la méthode peut également jouer un rôle dans la mise en œuvre de l'héritage. Le soi-disant emprunt de constructeur fait référence à l'emprunt du constructeur de l'objet parent dans le constructeur de l'objet enfant pour opérer ceci :

Copier le code Le code est le suivant :

fonction Parent() {}
Parent.prototype.name = 'parent'

fonction Enfant() {
Parent.apply(ce, arguments)
>
var enfant = nouvel enfant()
console.log(enfant.nom)

Le plus grand avantage de cette méthode est que dans le constructeur du sous-objet, les propres propriétés du sous-objet sont complètement reconstruites et la variable de type référence générera également une nouvelle valeur au lieu d'une référence, donc toute opération sur le sous-objet. object Ni l’un ni l’autre n’affectera l’objet parent.

L'inconvénient de cette méthode est que l'opérateur new n'est pas utilisé pendant le processus de construction de l'objet enfant, donc l'objet enfant n'héritera d'aucun attribut de l'objet prototype parent dans le code ci-dessus, l'attribut name du. l'enfant ne sera pas défini.

Pour résoudre ce problème, vous pouvez à nouveau définir manuellement le prototype du constructeur d'objet enfant sur une instance de l'objet parent :

Copier le code Le code est le suivant :

Enfant.prototype = nouveau Parent()

Mais cela entraînera un autre problème, c'est-à-dire que le constructeur de l'objet parent sera appelé deux fois, une fois pendant le processus d'emprunt du constructeur de l'objet parent et l'autre fois pendant le processus de prototype d'héritage.

Pour résoudre ce problème, nous devons supprimer un appel au constructeur de l'objet parent. L'emprunt du constructeur ne peut pas être omis, donc le dernier appel ne peut être supprimé qu'une autre façon d'implémenter l'héritage du prototype consiste à copier de manière itérative :
.

Copier le code Le code est le suivant :

extend2 (Enfant, Parent)

Utilisez simplement la méthode extend2() implémentée précédemment.