Heim >Web-Frontend >js-Tutorial >Eine ausführliche Einführung in die verschiedenen Methoden der JavaScript-Vererbung und ihre Vor- und Nachteile
Dieser Artikel stellt hauptsächlich die verschiedenen Möglichkeiten und Vor- und Nachteile eines umfassenden Verständnisses der JavaScript-Vererbung vor. Interessierte Freunde können sich darauf beziehen
Vorne geschrieben
Hinweis:
ist dasselbe wie „JavaScript ausführlichObjekte erstellen“, eher wie Notizen.
Hey, lass mich noch einmal seufzen: „JavaScript Advanced Programming“ ist wirklich gut geschrieben!1. Prototypenkettenvererbung
function Parent () { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getName()) // kevinProblem: 1.
Referenzen Attribute 🎜> wird von allen Instanzen gemeinsam genutzt, zum Beispiel:
2. Beim Erstellen einer Instanz von Child können Parameter nicht an Parentfunction Parent () { this.names = ['kevin', 'daisy']; } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); child1.names.push('yayu'); console.log(child1.names); // ["kevin", "daisy", "yayu"] var child2 = new Child(); console.log(child2.names); // ["kevin", "daisy", "yayu"]2 übergeben werden > Funktion konstruieren Vorteile:
function Parent () { this.names = ['kevin', 'daisy']; } function Child () { Parent.call(this); } var child1 = new Child(); child1.names.push('yayu'); console.log(child1.names); // ["kevin", "daisy", "yayu"] var child2 = new Child(); console.log(child2.names); // ["kevin", "daisy"]
1. Vermeidet, dass Referenztypattribute von allen Instanzen gemeinsam genutzt werden
2. Sie können Parameter an Parent in Child übergeben Zum Beispiel:Nachteile:
function Parent (name) { this.name = name; } function Child (name) { Parent.call(this, name); } var child1 = new Child('kevin'); console.log(child1.name); // kevin var child2 = new Child('daisy'); console.log(child2.name); // daisyMethoden werden jedes Mal im Konstruktor definiert erstellte Instanzen werden einmal erstellt.
3. Kombinationsvererbung
Prototyp-Kettenvererbung und klassische Vererbung sind eine perfekte Kombination.
Vorteile: Es kombiniert die Vorteile der Prototypenkettenvererbung und der Konstruktoren und ist das am häufigsten verwendete Vererbungsmuster in JavaScript.
function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child('kevin', '18'); child1.colors.push('black'); console.log(child1.name); // kevin console.log(child1.age); // 18 console.log(child1.colors); // ["red", "blue", "green", "black"] var child2 = new Child('daisy', '20'); console.log(child2.name); // daisy console.log(child2.age); // 20 console.log(child2.colors); // ["red", "blue", "green"]
4. Prototypische Vererbung
ist die simulierte Implementierung von ES5
Objectfunction createObj(o) { function F(){} F.prototype = o; return new F(); }.create, wobei das eingehende Objekt als erstellter Objektprototyp verwendet wird . Attributwerte, die Referenztypen enthalten, teilen sich immer den entsprechenden Wert, was mit der Vererbung der Prototypkette identisch ist.
Hinweis: Wenn der Wert von
geändert wird, ändert sich der Wert vonvar person = { name: 'kevin', friends: ['daisy', 'kelly'] } var person1 = createObj(person); var person2 = createObj(person); person1.name = 'person1'; console.log(person2.name); // kevin person1.firends.push('taylor'); console.log(person2.friends); // ["daisy", "kelly", "taylor"]nicht, weil
und person1.name
unabhängige Namenswerte haben, sondern weil person2.name
, Hinzufügen eines Namenswerts zu person1
, ohne den Namenswert im Prototyp zu ändern. person2
person1.name = 'person1'
person1
5. Parasitäre Vererbung
Erstellen Sie eine Funktion, die nur dazu dient, den Vererbungsprozess in irgendeiner Form zu kapseln Das Objekt wird zurückgegeben.
Nachteile: Wie beim geliehenen Konstruktormuster wird jedes Mal, wenn ein Objekt erstellt wird, eine Methode erstellt.
function createObj (o) { var clone = object.create(o); clone.sayName = function () { console.log('hi'); } return clone; }
6. Parasitäre kombinierte Vererbung
Der Einfachheit halber wird der Code der kombinierten Vererbung hier wiederholt:
Der größte Nachteil der kombinierten Vererbung besteht darin, dass der übergeordnete Konstruktor zweimal aufgerufen wird.
function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child('kevin', '18'); console.log(child1)Einmal beim Festlegen des Prototyps einer Subtyp-Instanz:
Einmal beim Erstellen einer Subtyp-Instanz:
Child.prototype = new Parent();
Erinnern Sie sich tatsächlich an die Simulationsimplementierung von new In diesem Satz führen wir Folgendes aus:
var child1 = new Child('kevin', '18');
Hier rufen wir den Parent-Konstruktor erneut auf.
Parent.call(this, name);Wenn wir also in diesem Beispiel das Objekt „child1“ drucken, werden wir feststellen, dass sowohl „Child.prototype“ als auch „child1“ ein Attribut namens „colors“ haben und der Attributwert ['red', 'blue', ' ist. Grün'] . Wie können wir uns also weiter verbessern und dieses Mal wiederholte Anrufe vermeiden? Was ist, wenn wir Child.prototype = new Parent() nicht verwenden, sondern Child.prototype indirekt Zugriff auf Parent.prototype gewähren? Sehen wir uns an, wie man es implementiert:
Schließlich kapseln wir diese Vererbungsmethode:
function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } // 关键的三步 var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); var child1 = new Child('kevin', '18'); console.log(child1);
Zitieren der parasitären kombinierten Vererbung in „JavaScript Advanced Programming“. Lob ist:
function object(o) { function F() {} F.prototype = o; return new F(); } function prototype(child, parent) { var prototype = object(parent.prototype); prototype.constructor = child; child.prototype = prototype; } // 当我们使用的时候: prototype(Child, Parent);Die hohe Effizienz dieser Methode spiegelt wider, dass sie den Parent-Konstruktor nur einmal aufruft und somit die Erstellung unnötiger und redundanter Attribute auf Parent.prototype vermeidet. Gleichzeitig bleibt die Prototypenkette unverändert, sodass „instanceof“ und „isPrototypeOf“ weiterhin normal verwendet werden können. Entwickler glauben im Allgemeinen, dass die parasitäre kompositorische Vererbung das idealste Vererbungsparadigma für Referenztypen ist.
Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in die verschiedenen Methoden der JavaScript-Vererbung und ihre Vor- und Nachteile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!