13.3 JavaScript-Objekte erweitern 
Eine besondere Eigenschaft jeder JavaScript-Klasse ist prototype. Damit können Sie unter anderem das OOP-Konzept der Vererbung implementieren. Als Wert für die Eigenschaft prototype geben Sie Eigenschaften und Methoden an, die alle Objekte der Klasse haben sollen. Angenommen, Sie haben eine allgemeine Klasse Auto implementiert, mit Eigenschaften wie ps und Methoden wie beschleunigen(). Dann erstellen Sie eine Klasse ElchAuto. Die soll alle Eigenschaften und Methoden der Klasse Auto besitzen, allerdings auch eine neue Methode: umkippen(). Das machen Sie dann so:
function Auto() {
// Auto wird implementiert ...
}
function ElchAuto() {
this.umkippen = function() {
// umkippen implementieren
};
}
ElchAuto.prototype = new Auto();
Diese Form der Erweiterung ist allerdings auch bei bestehenden JavaScript-Objekten möglich! Erinnern Sie sich noch an die Funktion zufall_intervall()aus Kapitel 6? Wenn diese einen Wert zwischen 65 und 90 zurückliefert, liegt ein ASCII-Code eines zufälligen Zeichens zwischen A und Z vor. Es wäre doch schön, wenn das String-Objekt von JavaScript eine solche Funktionalität direkt als Methode anbieten würde (zugegeben, über den praktischen Nutzen kann man diskutieren, aber es geht vor allem ums Prinzip). Mit der prototype-Eigenschaft ist das kein Problem:
function zufall_intervall(a, b) {
var z = Math.random();
z *= (b – a + 1);
z += a;
return (Math.floor(z));
}
String.prototype.random = function() {
return String.fromCharCode(zufall_intervall(65, 90));
};
Das String-Objekt besitzt jetzt eine Methode random(), allerdings nur wenn Sie die Klasse instanziieren (oder einen neuen String erstellen). Hier sehen Sie ein komplettes Beispiel, das ein Zufallszeichen zwischen A und Z erzeugt und ausgibt:
<html>
<head>
<title>Events</title>
<script type="text/javascript"><!--
function zufall_intervall(a, b) {
var z = Math.random();
z *= (b – a + 1);
z += a;
return (Math.floor(z));
}
String.prototype.random = function() {
return String.fromCharCode(zufall_intervall(65, 90));
};
//--></script>
</head>
<body>
<h1>Event-Listener</h1>
<form>
<input type="button" value="Zufallszeichen"
onclick="alert((new String()).random());" />
</body>
</html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 13.4 Ein zufälliges Zeichen
1 Denken Sie daran, dass Array-Indizes mit null beginnen.
|
