Wie implementiert Javascript die Vererbung?

Methode: 1. Verwenden Sie den Prototyp, um einem Referenztyp die Eigenschaften und Methoden eines anderen Referenztyps erben zu lassen. 2. Leihen Sie sich den Konstruktor aus und rufen Sie den Konstruktor der Oberklasse innerhalb des Konstruktors der Unterklasse auf, indem Sie call() und apply() verwenden. Der Konstruktor kann 3. Die Prototypenkette und die Technologie zum Ausleihen des Konstruktors werden kombiniert, um die Vererbung zu realisieren.

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

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

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 Prototypenkettenimplementierung:

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. Ausleihen des Konstruktors

Grundidee: Rufen Sie den Superklassenkonstruktor innerhalb des Subtypkonstruktors auf und verwenden Sie die Methoden call() und apply(), um den Konstruktor auf dem erstellten Typ auszuführen 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"

3. Kombinationsvererbung

Grundidee: Ein Vererbungsmuster, das die Technologie der Prototypenverkettung und des Ausleihens von Konstruktoren 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

4. Prototypische Vererbung

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"

5. Parasitäre Vererbung

Grundidee: Erstellen Sie eine Funktion, die nur zum Kapseln des Vererbungsprozesses verwendet wird, die das Objekt in gewisser Weise intern erweitert und sich schließlich so verhält, als ob sie wirklich die ganze Arbeit erledigt hätte. Objekt zurückgeben.

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 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);
}

【Empfohlenes Lernen:Javascript-Tutorial für Fortgeschrittene】

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