Objektorientierung (OOP) Teil 2 - Vererbung
10.04.2008
Author: N43
Kommentare
DownloadIm ersten Teil des Tutorials ging es um die Erstellung und Instanzierung von Objekten. In diesem Teil soll es nun um die Vererbung von Klassen / Objekten in Java Script gehen.
Wir werden dabei nur die prototype Eigenschaft verwenden. Warum werde ich weiter unten erläutern.
Unsere erste Klasse erbt alles vom Function Objekt. Dazu erstellen wir ein neues Objekt Foo wie im ersten Teil des Tutorials.
JAVASCRIPT - Code:
// neues Objekt anlegen
Foo = new Function();
// und von Function erben
Foo.prototype = new Function();
Jetzt müssen wir Foo noch um Methoden erweitern, zum Beispiel:
JAVASCRIPT - Code:
Foo.prototype.show = function() {
alert("Hello");
};
Damit haben wir unseren ersten Schritt in der Vererbung gemacht.
Wer schon öfters Objekte entworfen hat, wird bemerkt haben, dass Foo keinen eigenen Constructor bekommen hat. Das Problem mit einem eigenen Konstruktor offenbart sich in der nächsten Vererbungsstufe:
JAVASCRIPT - Code:
// neues Objekt anlegen
Bar = new Function();
// Eigenschaften / Methoden von Foo erben
Bar.prototype = new Foo();
Bar.prototype.show = function() {
alert("World!");
};
Jedesmal, wenn ein Objekt von Foo erbt, wird dessen Konstruktor ausgeführt. Man kann also keine initialisierenden Aufgaben in den Konstruktor packen, denn diese sollten erst (oder eventuell gar nicht) ausgeführt werden, wenn eine Instanz vom Typ Bar angelegt wird.
Wir verzichten also (leider) auf den Konstruktor und fügen Methoden prinzipiell über prototype hinzu.
In dem obigen Beispiel wurde die Methode show() von Foo mit der Methode show() von Bar überschrieben. Dadurch haben wir in der Methode show() von Bar keine Möglichkeit auf die Methode show() von Foo zuzugreifen. Über einen einfachen Trick können wir wieder auf die parent Methoden zugreifen:
JAVASCRIPT - Code:
Bar.prototype.parent = Foo.prototype;
// und die neue Methode show(), um den Zusatz auszunutzen
Bar.prototype.show = function() {
Bar.parent.show();
alert("World!");
};
Das war es so weit zur Vererbung. Hier noch zwei Funktionen, die uns das Entwickler-Leben einfacher machen sollen und ein Ersatz für den Konstruktor.
JAVASCRIPT - Code:
// dem Objekt eine neue Eigenschaft verpassen
// object kann dabei eine Funktion oder eine Variable sein
Function.prototype.extend = function (name, object) {
this.prototype[name] = object;
};
// sich selbst vererben, f ist die Kind-Klasse
// c ist der Konstruktor-Ersatz
Function.prototype.inherit = function (c) {
f = new Function();
f.prototype = new this;
f.prototype.parent = this.prototype;
f.prototype.create = c;
return f;
};
Im Anhang befindet sich ein Script, welches die im Tutorial angelegten Klassen mit den beiden Funktionen erstellt und die Verwendung des Konstruktor-Ersatzes zeigt. Hier noch kurz, wie man damit ein Objekt erstellt und erweitert.
JAVASCRIPT - Code:
// Klasse Foo erstellen
Foo = Function.inherit(function() {
alert("Foo created");
});
// Foo erweitern
Foo.extend ("show", function () {
alert("Hello");
});
Bei Fragen und Anregungen freue ich mich über einen Kommentar.
Wenn ich die Zeit finde, schreibe ich eventuell einen dritten Teil, wie man private und protected mit gettern und settern nachbaut.
Deine Meinung ist gefragt:
Sei der Erste und teile uns Deine Meinung mit.