Wie JavaScript die Vererbung implementiert (sechs Möglichkeiten)_Javascript-Tipps

Vorwort: Die meisten OO-Sprachen unterstützen zwei Vererbungsmethoden: Schnittstellenvererbung und Implementierungsvererbung. ECMAScript unterstützt jedoch nicht nur die Implementierungsvererbung, und die Implementierungsvererbung basiert hauptsächlich auf der Prototypenkette.

1. Prototypenkette

Grundidee: 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.

Beispiel für die Vererbung einer Prototypkettenimplementierung:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true

2. Konstruktor ausleihen

Grundidee: Rufen Sie den Superklassenkonstruktor innerhalb des Subtypkonstruktors auf, und der Konstruktor kann mithilfe der Methoden call() und apply() auf dem neu erstellten Objekt ausgeführt werden.

Beispiel:

function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

3. Kombinationsvererbung

Grundidee: Ein Vererbungsmodell, das die Technologie der Prototypenkette und des geliehenen Konstruktors kombiniert, um beide Vorteile zu nutzen.

Beispiel:

function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
console.log(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() {
console.log(this.age);
}
var instance1 = new SubType("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20

4. Prototypische Vererbung

Grundidee: Mit Hilfe von Prototypen können neue Objekte auf Basis bestehender Objekte erstellt werden, ohne dass benutzerdefinierte Typen erstellt werden müssen.

Die Idee der prototypischen Vererbung kann durch die folgende Funktion veranschaulicht werden:

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

Beispiel:

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

ECMAScript5 standardisiert die prototypische Vererbung durch die neue Methode Object.create(). Diese Methode empfängt zwei Parameter: 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"

5. Parasitäre Vererbung

Grundidee: Erstellen Sie eine Funktion, die nur dazu dient, den Vererbungsprozess zu kapseln, das Objekt intern auf irgendeine Weise zu verbessern und das Objekt schließlich so zurückzugeben, als ob es wirklich die ganze Arbeit erledigt hätte.

Beispiel:

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"

6. Parasitäre kombinierte Vererbung

Grundidee: Eigenschaften durch Ausleihen von Funktionen und Methoden durch die Hybridform der Prototypenkette erben

Das Grundmodell ist wie folgt:

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

Beispiel:

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;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}

Der obige Inhalt stellt Ihnen die sechs Möglichkeiten zur Implementierung der Vererbung in JavaScript vor. Ich hoffe, er wird Ihnen hilfreich sein!