In JavaScript ist die Vererbung ein Mechanismus, der die Erstellung neuer Klassen auf der Grundlage vorhandener Klassen ermöglicht und die Wiederverwendung von Methoden und Variablen der übergeordneten Klassen ermöglicht. Der Vererbungsprozess kann mithilfe von Prototypen erreicht werden Ketten und Konstrukteure.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.
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 übergeordneter 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 „extends“ können wir alle Eigenschaften und Verhaltensweisen integrierter Objekte sowie benutzerdefinierter Klassen abrufen.
Wir können die Vererbung auch mithilfe eines prototypbasierten Ansatzes implementieren.
Wie implementiert JavaScript die Vererbung?
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 Instanz enthält einen internen Zeiger auf das Prototypobjekt.
Beispiel für die Vererbung der Prototypkettenimplementierung:
function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//Inherited SuperTypeSubType.prototype = new SuperType ( );SubType.prototype.getSubValue = function (){return this.property;}var example = new SubType();console.log(instance.getSuperValue());//true2. 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);//Inherits SuperType}var example1 = new SubType(); .colors.push("black");console.log(instance1.colors);//"red","blue","green","black"var example2 = new SubType();console.log(instance2 . Farben);//"Rot", "Blau", "Grün"3. Kombinationsvererbung
Grundidee: Ein Vererbungsmuster, das die Technologie der Prototypenverkettung und der Kreditaufnahme von Konstruktoren kombiniert, um das Beste aus beiden Welten 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);//Geerbtes Attribut this.age = age;}//Geerbte Methode 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. farben);//"rot", "blau", "grün", "schwarz"instance1.sayName();//"EvanChen"instance1.sayAge();//18var case2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"red","blue","green"instance2.sayName();//"EvanChen666"instance2.sayAge();//204. Prototypische Vererbung
Die Grundidee: Mit Prototypen können Sie neue Objekte auf Basis bestehender Objekte erstellen, ohne benutzerdefinierte Typen erstellen zu müssen.
Die Idee der prototypischen Vererbung lässt sich durch die folgende Funktion veranschaulichen:
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“ECMAScript 5 standardisiert die prototypische Vererbung durch die neue Methode Object.create(), die zwei Parameter akzeptiert: 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
Die Grundidee: Erstellen Sie eine Funktion, die einfach den Vererbungsprozess kapselt, das Objekt intern auf irgendeine Weise erweitert und das Objekt zurückgibt, 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 ","Gericht","Van"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"hi"6. Parasitäre kombinatorische Vererbung
Grundidee: Eigenschaften durch Ausleihen von Funktionen und Methoden durch die Hybridform der Prototypenkette erben
Sein Grundmodell ist wie folgt:
function inheritProperty(subType, superType) {var prototyp = object(superType.prototype);//Objekt erstellen prototyp.constructor = subType;//Objekt verbessern subType.prototype = prototyp;//Objekt angeben}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);}