Was ist Vererbung in Javascript?

In JavaScript ist Vererbung ein Mechanismus, der die Erstellung neuer Klassen auf der Grundlage vorhandener Klassen ermöglicht. Die Vererbung bietet Flexibilität für Unterklassen und kann Methoden und Variablen von übergeordneten Klassen wiederverwenden. Der Vererbungsprozess reicht von allgemeinen bis hin zu speziellen Prozessen und Konstruktoren zur Implementierung der Vererbung.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist Vererbung in JavaScript? Die JavaScript-Vererbung ist ein Mechanismus, der es uns ermöglicht, neue Klassen basierend auf vorhandenen Klassen zu erstellen. Sie bietet Unterklassen die Flexibilität, Methoden und Variablen von übergeordneten Klassen wiederzuverwenden. Der Prozess der Vererbung ist der Prozess vom Allgemeinen zum Besonderen.

Es unterhält eine IS-A-Beziehung.

Das Schlüsselwort „extends“ wird in Klassenausdrücken oder Klassendeklarationen verwendet.

Mit dem Schlüsselwort „extens“ können wir alle Eigenschaften und Verhaltensweisen integrierter Objekte und benutzerdefinierter Klassen abrufen.

Wir können auch prototypbasierte Methoden verwenden, um die Vererbung zu implementieren.

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.

Prototyp-Kettenimplementierungs-Vererbungsbeispiel:

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

Grundidee: Rufen Sie den Superklassenkonstruktor innerhalb des Subtypkonstruktors auf und verwenden Sie die Methoden call() und apply(), um einen neuen Konstruktor auszuführen das Objekt.

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"

Grundidee: Ein Vererbungsmodell, das die Technologie der Prototypenkette und des geliehenen Konstruktors kombiniert, um das Beste aus beiden 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

Grundidee: Mit Hilfe von Prototypen können neue Objekte auf Basis bestehender Objekte erstellt werden, es besteht keine Notwendigkeit, benutzerdefinierte Typen zu erstellen.

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 erhält zwei Parameter: Einer wird als verwendet Prototyp des neuen Objektobjekts und ein Objekt, das zusätzliche Eigenschaften als neues Objekt definiert.

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"

Grundidee: Erstellen Sie eine Funktion, nur um den Vererbungsprozess zu kapseln, der das Objekt in gewisser Weise intern erweitert und schließlich so zurückkehrt, als ob es wirklich das gesamte Arbeitsobjekt 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"

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

Das Grundmodell lautet 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);
}

【Verwandte Empfehlungen:

, Web-Frontend】

Das obige ist der detaillierte Inhalt vonWas ist Vererbung in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!