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()) // kevinReferenzen Attribute< vom Typ 🎜> 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"]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); // daisy3. 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();
}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"] und person1.name unabhängige Namenswerte haben, sondern weil person2.name , Hinzufügen eines Namenswerts zu person1, ohne den Namenswert im Prototyp zu ändern. person2person1.name = 'person1'person15. 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 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);
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);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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
