Wie implementiert Javascript die Vererbung?

青灯夜游
Freigeben: 2021-10-13 13:39:49
Original
2746 Leute haben es durchsucht

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.

Wie implementiert Javascript die Vererbung?

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
Nach dem Login kopieren

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"
Nach dem Login kopieren

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
Nach dem Login kopieren

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();
}
Nach dem Login kopieren

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"
Nach dem Login kopieren

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"
Nach dem Login kopieren

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"
Nach dem Login kopieren

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; //指定对象
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

【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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage