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

In diesem Artikel werden die verschiedenen Vererbungsmethoden sowie Vor- und Nachteile von JavaScript erläutert.

Hinweis:

ist dasselbe wie „JavaScript ausführlich

Objekte 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()) // kevin

Problem:

1.

Referenzen Attribute< vom Typ 🎜> wird von allen Instanzen gemeinsam genutzt, zum Beispiel:

2. Beim Erstellen einer Instanz von Child können Parameter nicht an Parent

function 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

(klassische Vererbung)

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); // daisy

Methoden 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

Object

function createObj(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

.create, wobei das eingehende Objekt als erstellter Objektprototyp verwendet wird .

Nachteile:

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 von

var 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. 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 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!