OOP/DOM-Scripting JavaScript - Praxistutorial 4 - Initialisierung
1. Die Abschnitte
- Einführung
- Vorbereitung
- Initialisierung
- Beginn der Lobpreisung
- Die weiteren Schritte
- Das Ende
- Fazit
2. Die ersten Schritte
Zunächst legen wir eine Konstruktorfunktion fest, in der wir später die Methoden und Eigenschaften für die "Lobpreisung" kapseln. Und
da wir auf die beiden Methoden von Helper zugreifen möchten, binden wir den über das Prototyping ein.
function Glorification()
{
}
Glorification.prototype = new Helper;
3. Der Aufruf
window.onload = function()
{
var glor = new Glorification;
}
Dazu sage ich jetzt nichts mehr. Hab mich ja oft genug über dieses Thema ausgelassen.
4. Fire at will
function Glorification()
{
(
function ()
{
}
)();
}
Über dieses seltsame Gebilde habe ich euch ja schon an dieser Stelle aufgeklärt. Dabei handelt es sich in diesem(!) Fall um eine Art von echtem Konstruktor, wie man ihn aus anderen Sprachen kennt.
5. Der erste Event-Listener
... wird nun in obiges Konstrukt eingebaut. Und dafür nutzen wir die Methode addHandler aus dem Konstruktor Helper.
Den Verweis auf das entsprechende HTML mit der ID start holen wir uns aus dem Literal data. In diesem Fall also
data.start. Leider gibt es dabei ein Problem. Denn der eigentlich übliche Aufruf über
(
function ()
{
this.addHandler(data.start, 'click', startGlorification);
}
)();
function startGlorification ()
{
...
}
führt zu einer Fehlermeldung. Und das liegt an dieser hirnrissigen Spezifikation mit dem
this. Denn in dieser(!) anonymen Funktion verweist es auf das
window-Objekt. Also muss man hier den Umweg über eine Referenzvariable gehen
function Glorification()
{
var that = this;
...
}
und dann darüber die Methode aufrufen.
that.addHandler(data.start, 'click', startGlorification);
Keine Angst
Das ist nicht das letzte Mal in diesem Tutorial, wo wir dem Problem konfrontiert werden. Da kommen noch einige auf euch zu.