Wenn Sie die objektorientierte Programmierung in JavaScript durchgeführt haben, wissen Sie, dass Sie eine Klasse wie folgt erstellen können:
Person = function(id, name, age){
this.id = id;
this.name = name;
this.age = age;
alert('A new person has been accepted');
}
Bisher hat unsere Klassenperson nur zwei Eigenschaften und wir werden ihr einige Methoden geben. Ein sauberer Weg, dies zu tun, ist die Verwendung des "Prototyp" -Objekts. Ab JavaScript 1.1 wurde das Prototypobjekt in JavaScript eingeführt. Dies ist ein integriertes Objekt, das das Hinzufügen benutzerdefinierter Eigenschaften und Methoden zu allen Instanzen eines Objekts vereinfacht. Fügen wir unserer Klasse zwei Methoden hinzu, indem wir das 'Prototyp'-Objekt wie folgt verwenden:
Person.prototype = {
/** wake person up */
wake_up: function() {
alert('I am awake');
},
/** retrieve person's age */
get_age: function() {
return this.age;
}
}
Jetzt haben wir unsere Klasse Person definiert. Was wäre, wenn wir eine andere Klasse namens Manager definieren wollten, die einige Eigenschaften von Person erbt? Es macht keinen Sinn, all diese Eigenschaften erneut zu definieren, wenn wir unsere Manager-Klasse definieren. Wir können sie einfach so einstellen, dass sie von der Klasse Person erbt. JavaScript hat keine eingebaute Vererbung, aber wir können eine Technik verwenden, um die Vererbung wie folgt zu implementieren:
Inheritance_Manager = {};// Wir erstellen eine Vererbungsmanagerklasse (der Name ist beliebig)
Geben wir unserer Vererbungsklasse nun eine Methode namens extens, die die Argumente baseClass und subClassas verwendet. Innerhalb der Extend-Methode erstellen wir eine innere Klasse namens Vererbungsfunktion inheritance () {}. Der Grund, warum wir diese innere Klasse verwenden, besteht darin, Verwechslungen zwischen den Prototypen baseClass und subClass zu vermeiden. Als nächstes verweisen wir den Prototyp unserer Vererbungsklasse wie folgt auf den baseClass-Prototyp: inheritance.prototype = baseClass. Prototyp; Dann kopieren wir den Vererbungsprototyp wie folgt in den Unterklassenprototyp: subClass.prototype = new inheritance (); Als nächstes müssen Sie den Konstruktor für unsere Unterklasse wie folgt angeben: subClass.prototype.constructor = subClass; Sobald wir mit unserem SubClass-Prototyping fertig sind, können wir die nächsten beiden Codezeilen angeben, um einige Basisklassenzeiger festzulegen.
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
Hier ist der vollständige Code für unsere Erweiterungsfunktion:
Inheritance_Manager.extend = function(subClass, baseClass) {
function inheritance() { }
inheritance.prototype = baseClass.prototype;
subClass.prototype = new inheritance();
subClass.prototype.constructor = subClass;
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
}
Nachdem wir unsere Vererbung implementiert haben, können wir damit beginnen, unsere Klassen zu erweitern. In diesem Fall erweitern wir unsere Person-Klasse wie folgt in eine Manager-Klasse:
Wir definieren die Manager-Klasse
Manager = function(id, name, age, salary) {
Person.baseConstructor.call(this, id, name, age);
this.salary = salary;
alert('A manager has been registered.');
}
Wir lassen es von Person erben
Inheritance_Manager.extend(Manager, Person);
Wenn Sie bemerkt haben, haben wir gerade die Extend-Methode unserer Inheritance_Manager-Klasse aufgerufen und in unserem Fall den subClass Manager und dann die baseClass Person übergeben. Beachten Sie, dass die Reihenfolge hier sehr wichtig ist. Wenn Sie sie austauschen, funktioniert die Vererbung nicht wie beabsichtigt, wenn überhaupt. Beachten Sie auch, dass Sie diese Vererbung angeben müssen, bevor Sie unsere Unterklasse tatsächlich definieren können. Definieren wir nun unsere Unterklasse:
Wir können weitere Methoden wie die folgende hinzufügen. In unserer Manager-Klasse sind immer die Methoden und Eigenschaften in der Person-Klasse definiert, da sie von dieser erbt.
Manager.prototype.lead = function(){
alert('I am a good leader');
}
Um es zu testen, erstellen wir zwei Objekte, eines aus der Klasse Person und eines aus dem geerbten Klassenmanager:
var p = new Person(1, 'Joe Tester', 26);
var pm = new Manager(1, 'Joe Tester', 26, '20.000');
Den vollständigen Code und weitere Kommentare erhalten Sie unter:
http://www.cyberminds.co.uk/blog/articles/how-to-implement-javascript-inheritance.aspx