OOP/DOM-Scripting JavaScript - Praxistutorial 1 - Die Variablen

1. Die Abschnitte

• Einführung
• Vorbereitung
• Die Konstruktorfunktion
• Die Event-Handler
• Die Variablen
• Die Methoden im Detail
• Alternative Event-Handler

2. Aufgepasst!

Was jetzt kommt, ist sehr wichtig! Und zwar geht es darum, wie man von Methoden unterschiedlicher Sichtbarkeit auf Variablen unterschiedlicher Sichtbarkeit zugreifen kann. Als Beispiel nehmen wir mal die Parameterübergabe der Referenzvariablen. Das haben wir so gemacht.

var mymenue = new animateMenue(1, 31, 5);

Aus gutem Grund. Denn nun können wir die entsprechenden Variablen als privat deklarieren und die Werte entsprechend zuweisen, auf die dann alle Methoden Zugriff haben.

function animateMenue (begin, end, time)
{
  var start = begin;
  var stop  = end;
  var zeit  = time;
  ...
}

3. Die Alternative

... zeige ich euch nur, damit ihr wisst, dass es in JavaScript auch noch andere Möglichkeiten gibt. In diesem Fall legen wir die Variablen als öffentlich fest und weisen die Werte über die Referenzvariable / das Objekt zu. Das sähe dann so aus.

function animateMenue ()
{
  this.start = null;
  this.stop  = null;
  this.zeit  = null;
  ...
}
var mymenue = new animateMenue();
mymenue.start = 1;
mymemue.stop  = 31;
mymenue.zeit  = 5;

Hinweis

Bei der Variante mit this.variablenname muss man immer direkt einen Wert zuweisen, in diesem Fall habe ich null genommen. Der bedeutet einfach gesagt gar nichts. Der Unterschied zu this.variablenname = ''; ist einfach zu erklären. Bei letzterem bekommen wir bei einem typeof als Ergebnis ein string zurückgeliefert, bei ersterem nur das übliche object.

Der Haken

Eigentlich würde diese Variante auch wunderbar funktionieren, wenn die Sache nicht einen riesengroßen Haken hätte. Auf öffentliche Variablen innerhalb einer Objektfunktion kann nur mit öffentlichen Methoden direkt zugegriffen werden! Probiert mal den folgenden Code aus, das bekommt ihr tatsächlich ein undefined zurück,

function bla()
{
  this.blubb = 'bla';
  function laber ()
  {
    alert (this.blubb);
  }
  laber();
}
var blubber = new bla();

während das hier tadellos funktioniert:

this.laber = function ()
{
  alert (this.blubb);
}
this.laber();

Es gibt zwar noch einen anderen Weg mit einer Referenz auf this, so wie ich es hier gezeigt habe, aber das ignoriere ich und sage euch auch sofort warum.

4. Und nun?

Ist wohl mal wieder Geschmackssache. Nur-JavaScript-Programmierer würden wohl sagen

Wen juckts. Läuft doch. Arbeite ich halt nur mit öffentlichen Methoden. [Quelle: Nur-JavaScript-Programmierer]

Aus ihrer Sicht haben sie sicherlich auch Recht, zumal viele Bibliotheken mittels des so genannten Literal-Objekts entwickelt werden. Da hat man eh keine Alternativen. Ein Beispiel dazu gibt es irgendwann mal bei einen weiteren Anfängertutorial.

Aber Entwickler, die von Hause aus mit anderen Sprachen zu tun haben, bekommen da ein wenig Bauchweh. Ich auch, darum arbeite ich so, wie unter Punkt 2 beschrieben. Deshalb werden die noch fehlenden Variablen auch so festgelegt.

function animateMenue (begin, end, time)
{
  ...
  var hovered;
  var last_hovered;
  var last_fieldnum;
  var fieldnum;
  var start_point;
  ...
}

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