(Superklassiker) Zusammenfassung der Objektvererbungsmethoden in JavaScript

Dieser Artikel bietet Ihnen eine Zusammenfassung der (superklassischen) Objektvererbungsmethode in JavaScript. Ich hoffe, dass er für Sie hilfreich ist.

1. Vererbung der Prototypenkette

Wichtige Punkte: Verwenden Sie Prototypen, um einem Referenztyp die Eigenschaften und Methoden eines anderen Referenztyps erben zu lassen. Die Beziehung zwischen Konstruktoren, Prototypen und Instanzen: Jeder Konstruktor verfügt über ein Prototypobjekt, das Prototypobjekt enthält einen Zeiger auf den Konstruktor und die Instanzen enthalten einen internen Zeiger auf das Prototypobjekt.

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};

function SubType(){
  this.subproperty = false;
}
// 继承自SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
  return this.subproperty;
};

var example = new SubType();
alert(example.getSuperValue());//true

Die Verwendung von Prototypen zum Erstellen von Objekten führt zu dem Problem, dass die Operationen mehrerer Instanzen an Referenztypen manipuliert werden. Dieses Problem besteht auch oben, wie folgt:

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){}//即使没有写，也不会影响结果

SubType.prototype = new SuperType();

var example1 = new SubType();
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"

var example2 = new SubType(); 
alert(example.colors); //"red,blue,green,black"

Zwei Instanzobjekte Beispiel1 und Beispiel2 Die Farbeigenschaften verweisen auf dieselbe Eigenschaft. Wenn Sie eine ändern, wirkt sich dies auf die andere Instanz aus.

Nachteile:
① Die Referenztypattribute mehrerer Instanzen der Prototypenkette vererben auf denselben Punkt. Wenn eine Instanz das Prototypattribut ändert, wird auch das Prototypattribut der anderen Instanz geändert 🎜>② Parameter können nicht übergeben werden ;
③Einzelne Vererbung.

2. Vererbung von Konstruktoren

Wichtige Punkte: Verwenden Sie .call() und .apply(), um den Konstruktor der übergeordneten Klasse in die Funktion der untergeordneten Klasse einzuführen und zu verwenden Der Konstruktor der übergeordneten Klasse erweitert die Instanz der Unterklasse, was dem Kopieren der Instanz der übergeordneten Klasse in die Unterklasse entspricht.

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

function SubType(name, age){
  // 继承自SuperType
  SuperType.call(this, name);  
  this.age = age;
}

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors);//"red,blue,green,black"

var example2 = new SubType();
alert(example2.colors);//"red,blue,green"

alert(example1.name); // "Mike"
alert(example1.age); // 23

Der entscheidende Punkt bei der Vererbung von Kreditkonstruktoren ist, dass SuperType

.call(this, name) den SuperType-Konstruktor aufruft. Auf diese Weise kopiert jede Instanz von SubType die Eigenschaften in SuperType One Portion.

Nachteile:

① kann nur die Instanzattribute und -methoden der übergeordneten Klasse erben, nicht jedoch die Prototypattribute/-methoden.
② kann die Wiederverwendung von Konstruktoren nicht realisieren, und jede Unterklasse verfügt über eine Instanz von Die Kopie der Funktion der übergeordneten Klasse wirkt sich auf die Leistung aus und der Code wird aufgebläht.

3. Kombinationsvererbung

Wichtige Punkte: Die Vorteile der beiden Modi

Prototypkettenvererbung und Konstruktorvererbung In Kombination wird der Konstruktor der übergeordneten Klasse aufgerufen, die Eigenschaften der übergeordneten Klasse geerbt, die übergebenen Parameter beibehalten und anschließend die Instanz der übergeordneten Klasse als Prototyp der Unterklasse verwendet, um eine Wiederverwendung von Funktionen zu erreichen.

Die Idee dahinter ist, dass

die Prototypenkette verwendet, um die Vererbung von Prototypeigenschaften und -methoden zu erreichen und auf diese Weise die Vererbung von Instanzeigenschaften durch Ausleihen von Konstruktoren erreicht Es realisiert nicht nur die Wiederverwendung von Funktionen durch die Definition von Methoden im Prototyp, sondern stellt auch sicher, dass jede Instanz über eigene Attribute verfügt.

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

function SubType(name, age){
  //继承属性
  SuperType.call(this, name);
  this.age = age;
}

// 继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"
example1.sayName(); //"Mike";
example1.sayAge(); //23

var example2 = new SubType("Jack", 22);
alert(example2.colors); //"red,blue,green"
example2.sayName(); //"Jack";
example2.sayAge(); //22

Fehler:

Die Instanzattribute und -methoden in der übergeordneten Klasse sind sowohl in der Instanz der Unterklasse als auch im Prototyp der Unterklasse vorhanden, belegen daher nur Speicher, wenn die Unterklasse verwendet wird create Beim Instanziieren eines Objekts gibt es
zwei Kopien derselben Eigenschaften/Methoden in seinem Prototyp. -------Diese Methode ist das am häufigsten verwendete Vererbungsmuster in JavaScript.

4. Prototypische Vererbung

Wichtiger Punkt: Umschließen Sie ein Objekt mit einer Funktion und geben Sie dann den Aufruf dieser Funktion zurück. Diese Funktion wird zu einer Funktion, die Attribute hinzufügen kann nach Belieben Instanz oder Objekt. Dies ist das Prinzip von object.create(), das ein Objekt direkt dem Prototyp des Konstruktors zuweist.

function object(obj){
  function O(){}
  O.prototype = obj;
  return new O();
}

object() führt eine flache Kopie des übergebenen Objekts durch und zeigt den Prototyp von O direkt auf das übergebene Objekt.

var person = {
  name: "Mike",
  friends: ["Jack", "Tom", "Joes"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Peter");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("BoBo");

alert(person.friends);   //"Jack,Tom,Joes,Peter,BoBo"

ECMAScript5 standardisiert die prototypische Vererbung durch die neue Methode Object.create(), die zwei Parameter empfängt: ein Objekt, das als Prototyp des neuen Objekts verwendet wird, und ein Objekt, das als neues Objekt zum Definieren zusätzlicher Eigenschaften verwendet wird.

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

Nachteile:

①Die von der Prototypkette geerbten Referenztypattribute zeigen auf denselben Punkt (alle Instanzen erben die Attribute auf dem Prototyp), es besteht die Möglichkeit einer Manipulation; >②Parameter können nicht übergeben werden, Wiederverwendung ist nicht möglich. (Neue Instanzattribute werden später hinzugefügt).

5. Parasitäre Vererbung

Kernpunkt: Erstellen Sie eine Funktion, die nur zum Kapseln des Vererbungsprozesses verwendet wird, das Objekt intern auf irgendeine Weise erweitert und schließlich zurückkehrt Konstrukteur. (Es ist, als würde man eine Hülle um die prototypische Vererbung legen und sie dann zurückgeben.) Die Hauptfunktion von

function createAnother(original){ 
  varclone=object(original); // 过调用函数创建一个新对象
  clone.sayHi = function(){ // 以某种方式增强这个对象
    alert("hi");
  };
  return clone; // 返回对象
}

besteht darin, dem Konstruktor Attribute und Methoden hinzuzufügen, um die Funktion zu verbessern.

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

Nachteile:

① Die Referenztypattribute mehrerer Instanzen, die von der Prototypenkette geerbt werden, zeigen auf denselben Punkt, und es besteht die Möglichkeit einer Manipulation;

② Parameter können nicht übergeben werden, der Prototyp wird nicht verwendet und kann nicht wiederverwendet werden.

6. Parasitäre kombinierte Vererbung

Wichtige Punkte: Vererben Sie Attribute durch Ausleihen von Konstruktoren, um Parameter und parasitären Modus zu übergeben, und vererben Sie Methoden über die Hybridform der Prototypenkette. Verwenden Sie apply oder call, um einen weiteren Konstruktor in die Funktion einzuführen, und Parameter können übergeben werden.

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //Object.create创建对象
  prototype.constructor = subType;                    // 增强对象
  subType.prototype = prototype;                      // 指定对象
}

// 父类初始化实例属性和原型属性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用构造函数传递增强子类实例属性（支持传参和避免篡改）
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 将父类原型指向子类
inheritPrototype(SubType, SuperType);

// 新增子类原型属性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var example1 = new SubType("abc", 21);
var example2 = new SubType("def", 22);

example1.colors.push("pink"); // ["red", "blue", "green", "pink"]
example1.colors.push("black"); // ["red", "blue", "green", "black"]

Die parasitäre Kombinationsvererbung vereint die Vorteile der vorherigen Vererbungsmethoden und vermeidet nahezu alle Mängel der oben genannten Vererbungsmethoden. Sie weist die höchste Ausführungseffizienz und den breitesten Anwendungsbereich auf.

Nachteile:

Der Implementierungsprozess ist relativ umständlich.

Warum müssen Sie diese Vererbungsmethoden erlernen? Warum sollten Sie sich solche Mühe machen, wenn Sie direkt erben können?

Der Hauptzweck besteht darin, ihre Ideen zu lernen und eine bessere Grundlage zu schaffen, was für das zukünftige Lesen des Quellcodes des Frameworks oder das Kapseln von Komponenten oder sogar Frameworks selbst von großem Nutzen sein wird. Die Zeit war etwas eilig und ich habe keine ES6-Erweiterungen hinzugefügt.

Verwandte Empfehlungen:

JavaScript-objektorientierte Vererbungsmethode

Drei Möglichkeiten, die Vererbung in JavaScript_js objektorientiert zu implementieren

Das obige ist der detaillierte Inhalt von(Superklassiker) Zusammenfassung der Objektvererbungsmethoden in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!