Einführung in verschiedene Vererbungsmethoden sowie Vor- und Nachteile von js

In diesem Artikel werden hauptsächlich die verschiedenen Möglichkeiten sowie die Vor- und Nachteile eines umfassenden Verständnisses der JavaScript-Vererbung vorgestellt. Interessierte Freunde können darauf verweisen

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 🎜> wird von allen Instanzen gemeinsam genutzt, zum Beispiel:

2 Beim Erstellen einer Instanz von Child können keine Parameter an das 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. Ausleihen

Konstruktor

(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 werden von allen Instanzen geteilt

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 sind alle Die im Konstruktor definierte Methode wird jedes Mal erstellt, wenn eine Instanz erstellt wird.

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.

【Verwandte Empfehlungen】

1.

Besondere Empfehlung

: Version „php Programmer Toolbox“ V0.1 herunterladen 2. Kostenloses JS-Online-Video-Tutorial

3.php.cn Dugu Jiujian (3) - JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Vererbungsmethoden sowie Vor- und Nachteile von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!