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.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt