Wie nutzt JavaScript die Vererbung?

Die verwendeten Methoden sind: 1. Prototypenkettenvererbung. Jedes AO-Objekt verfügt über einen Prototyp, der einen Verweis auf den Prototyp des Objekttyps zurückgibt, sodass ihm ein Objekt zugewiesen werden kann. 2. Prototyp gibt vor, eine Vererbung zu sein Der Konstruktor der übergeordneten Klasse kommt hierher und führt ihn erneut aus. 3. Kopieren Sie die Vererbung, kopieren Sie alle Eigenschaften und Methoden der übergeordneten Klasse.

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

1. Prototypenkettenvererbung

Diese Vererbung ist die einfachste. Das Implementierungsprinzip besteht darin, dass jedes AO-Objekt einen Verweis auf den Prototyp des Objekttyps zurückgibt, sodass Sie ihm ein Objekt zuweisen können, um ein zu implementieren einfacher Prototyp. Kettenvererbung.

function Animal(){    this.eat = function(){
        alert("我会吃");
    }
}function Bird(){    this.fly = function(){
        alert("我会飞");
    }
}
//设置Bird类的原型为一个Animal对象
Bird.prototype = new Animal();var pigeon = new Bird();
pigeon.fly();
pigeon.eat();

Das Ergebnis zeigte sich, als man erkannte, dass Vögel die Eigenschaft von Tieren, fressen zu können, erben können. Drucken Sie console.info (taube) und wir können sehen:

Das __proto__-Attribut des aktuellen Objekts ist ein Animal-Objekt, und die eat-Methode befindet sich in diesem Animal-Objekt, das seine übergeordnete Klasse ist. Wenn es sich um ein Attribut oder eine Methode handelt Wenn es im aktuellen Objekt nicht gefunden werden kann, wird es Schritt für Schritt entlang der Prototypenkette gefunden.

Die übergeordnete Klasse von Bird ist hier Animal und die übergeordnete Klasse von Animal ist Object. Mit anderen Worten: Alle Objekte, die keinen Prototyp direkt angeben, haben ihre übergeordnete Klasse Object. Da sich die toString()-Methode in Object befindet, kann sie von allen Objekten aufgerufen werden. Die übergeordnete Klasse von Object ist null.

Ein weiteres Problem, das Aufmerksamkeit erfordert, ist, dass bei der Vererbung der Prototypkette das übergeordnete Klassenobjekt aller Unterklassen dasselbe ist. Solange eine Unterklasse die Eigenschaften des übergeordneten Klassenobjekts ändert, sind alle Objekte betroffen. Dies kann ein Nachteil oder ein Vorteil sein.

Hinweis: Den Unterschied zwischen Prototyp und __proto__ finden Sie in meinem anderen Blog http://www.cnblogs.com/shamoyuu/p/prototype.html

2. Vererbung des Prototyp-Identitätswechsels

Das Prinzip des Prototyp-Identitätswechsels ist: Nehmen Sie den Konstruktor der übergeordneten Klasse und führen Sie ihn erneut aus. Schauen Sie sich den folgenden Code an:

function Animal(){    this.eat = function(){
        alert("我会吃");
    }
}function Bird(){    Animal.apply(this, arguments);this.fly = function(){
        alert("我会飞");
    }
}var pigeon = new Bird();
pigeon.fly();
pigeon.eat();

Der Effekt ist der gleiche wie oben, aber dieses Mal befindet sich die Eat-Methode nicht mehr in der Prototypenkette, sondern im Taubenobjekt.

3. Kopiervererbung

Das Prinzip der Kopiervererbung lautet: Kopieren Sie alle Eigenschaften und Methoden der übergeordneten Klasse. Siehe den Code unten.

function Animal(){    this.eat = function(){
        alert("我会吃");
    }
}function Bird(){    this.fly = function(){
        alert("我会飞");
    }    //这里写一个继承的方法，用来复制所有父类的属性或方法
    this.extend = function(parent){        for(var key in parent){            this[key] = parent[key];
        }
    }
}var pigeon = new Bird();//执行继承的方法pigeon.extend(new Animal());

pigeon.fly();
pigeon.eat();

Dieser ist derselbe wie oben.

4. Vererbung von ES6-Standardklassen

Das Konzept der Klasse wird in ES6 eingeführt. Die neue Klasse kann uns helfen, besseren und intuitiveren objektorientierten Code zu schreiben.

Das Folgende ist die Vererbung von Klassen in ES6, und der erzielte Effekt ist der gleiche wie oben.

class Animal {
    constructor(name){        this.name = name;        this.type = "动物";
    }
    
    says(say){
        console.info(this.type + "【" + this.name + "】" + "说 " + say);
    }
}

let dog = new Animal("狗狗");
dog.says("汪汪汪");


class Bird extends Animal {
    constructor(name){
        super(name);        this.type = "小鸟";
    }
}

let pigeon = new Bird("鸽子");
pigeon.says("我是一只小鸟");

Die Implementierung ist sehr einfach und intuitiv und wird nicht mehr als „Scheinvererbung“ bezeichnet.

Erweiterte Informationen

Vor- und Nachteile der Prototyp-Kettenvererbung

1. Nur Einzelvererbung. 2. Nach der Vererbung sind alle Objekte betroffen. 3. Die Geschwindigkeit ist etwas langsamer.

Vor- und Nachteile der Prototypen-Identitätsvererbung

1. Obwohl eine Mehrfachvererbung möglich ist, kann sie zur Laufzeit nicht dynamisch vererbt werden. Sie können nur den Konstruktor der übergeordneten Klasse ändern.

Kopieren Sie die Vererbung (von ES6 nicht empfohlen)

Da die beiden oben genannten Mängel sehr gut vermieden werden, kann eine Mehrfachvererbung erreicht werden. Die Vererbung wirkt sich nur auf das aktuelle Objekt aus und ist schnell, ohne den übergeordneten Konstruktor zu ändern usw. Daher wird diese Vererbungsmethode am meisten empfohlen.

Hinweis: Die Vererbung von jQuery wird ebenfalls durch Kopiervererbung implementiert, jQuery fügt jedoch viele Überprüfungsurteile hinzu, das Prinzip ist jedoch dasselbe.

Vererbung von ES6-Standardklassen

Wenn Sie die neuesten ES6-Funktionen nutzen können, ist diese Vererbung die beste, leicht verständliche und Vererbungsmethode, die standardmäßige objektorientierte Sprachen haben sollten.

Aber bitte beachten:

Im Konstruktor der Unterklasse muss „this“ nach dem super()-Aufruf stehen

Super() muss im Konstruktor der Unterklasse aufgerufen werden, oder es muss explizit ein Objekt zurückgegeben werden

Mehrfachvererbung ist nicht zulässig

-- Java generiert beim Erben automatisch ein übergeordnetes Klassenobjekt, in js ist dies jedoch nicht der Fall

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

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