JavaScript Obekt und Objektfunktionen

Wie man in JavaScript Mit Objekten eine Klasse nachbilden kann



Klasse mit Objekten nachbilden
In JavaScript gibt es leider keine Klassen. Dies führt jedoch meist zu Problemen, wenn mehrere verschiedene Dateien eingesetzt werden, in welchen die selben Variablennamen oder Funktionsnamen vorhanden sind. Um sauberen Code zu schreiben, sollte man als Programmierer aber auch Funktionen und Variablen, welche zusammen gehören auch zusammengehörig speichern.


Lösung
Die Lösung des Fehlenden Klassenproblems erreichen wir dadurch, dass wir durch Objekte welche in JavaScript verfügbar - und auch hervorragend einsetzbar sind, praktisch eine Klasse nachbilden. Nachbilden bedeutet jedoch nur, dass wir den Komfort erhalten über ein Objekt weitere untergeordnete Objekte anzusprechen und untereinander in den Objekten Daten auszutauschen.



 Beispiel 1
 

/**
* @desc Konstruktor für das Objekt ImageViewer
*/
function ImageViewer ( )
{
  // Variablen für das Objekt ImageViewer
  this.variable1 ="Variablenwert1";
  this.variable2 ="Variablenwert2";
 
  // 1. Objektfunktion definieren
  this.aStart = ImageViewer.start; // Funktion der Variable aStart zuweisen
  this.aStart(); // Nun kann die Funktion start() über this.aStart angesprochen werden
 
  // 2. Objektfuntkion definieren
  this.aEnde = ImageViewer.ende;
}
 
 
/**
* @desc Erste Funktion des Objekts ImageViewer
*/
ImageViewer.start = function ( )
{
  // Objektvariable ermitteln
  alert(this.variable1);
}
 
 
/**
* @desc Zweite Funktion des Objekts ImageViewer
*/
ImageViewer.ende = function ( )
{
  // Objektvariable ermitteln
  alert(this.variable2);
}
 
Nach dem Erstellen unseres eigenen Objekts, kann auf dieses wie folgt zugegriffen werden: 
// aImageViewer von Objekt ImageViewer() ableiten
var aImageViewer = new ImageViewer();
 
 
// Objektinstanzen können nun über aImageViewer.Objektname zugegriffen werden
aImageViewer.aEnde(); // Funktion aufrufen
alert("Objektvariable: " + aImageViewer.variable1); // Variable ausgeben
 
Beispiel 2
 
/**
* @desc Konstruktor für das Objekt ImageViewer
*/
function ImageViewer ( )
{
  // Variablen für das Objekt ImageViewer
  this.variable1 ="Variablenwert1";
  this.variable2 ="Variablenwert2";
 
 
  /**
  * @desc Erste Funktion des Objekts ImageViewer
  */
  this.ImageViewer.start = function ( )
  {
     // Objektvariable ermitteln
     alert(this.variable1);
  }
 
 
  /**
  * @desc Zweite Funktion des Objekts ImageViewer
  */
  this.ImageViewer.ende = function ( )
  {
    // Objektvariable ermitteln
    alert(this.variable2);
  }
 
}
 
// aImageViewer von Objekt ImageViewer() ableiten
var aImageViewer = new ImageViewer();
 
 
// Objektinstanzen können nun über aImageViewer.Objektname zugegriffen werden
aImageViewer.aEnde(); // Funktion aufrufen
alert("Objektvariable: " + aImageViewer.variable1); // Variable ausgeben
 
window.setTimeout() Problem beheben
Verwendet man in einem eigenen Objekt ein setTimeout(), um etwa einen Text oder ein Bild scrollen zu lassen, so kann man window.setTimeout() nicht wie üblich verwenden.
 
// Das funktioniert so bei einem Objekt nicht mehr !!!
 
setTimeout("start()", 100); // Fehler
setTimeout("this.start()", 100); // Fehler
Um bei einem Objekt setTimeout() richtig benutzen zu können, muss etwas in die Trickkiste gegriffen werden. Folgender Code zeigt, wie es bei einem Objekt richtig aussehen muss 
// So ist es bei einem Objekt richtig
 
var thisTmp = this;
window.setTimeout(function(){thisTmp.start();}, 100);