Tips & Tricks: Eigene Objekte erzeugen

Dank der zahlreich eingebauten Objekte in JavaScript ist es möglich, mit einfachen Mitteln ansprechende Programme zu schreiben. Möchte man individuelle Aufgaben lösen, wird man mit den gegebenen Mitteln sehr schnell an die Grenzen des Möglichen stoßen. Hier kommen dann eigens definierte Objekte zum Einsatz. In unserem Beispiel wollen wir das Erzeugen einer Tabelle vereinfachen, indem wir ein eigenes Objekt hierzu anlegen.

In JavaScript wird ein neues Objekt durch eine Funktion erzeugt. In dieser Funktion werden nun die Namen und die Eigenschaften des Objekts definiert. Deshalb spricht man hierbei auch von der sogenannten Konstruktorfunktion. Sehen wir uns hierzu ein einfaches Beispiel an:

function tabelle(a, b, c, d, e) { this.a = a this.b = b this.c = c this.d = d this.e = e }

Diese Funktion erzeugt bisher keine neuen Objekte, sondern eine Objekt-Klasse mit dem Namen "Tabelle" und den Eigenschaften a, b, c, d, e und Ausgabe. Die Informationen zu den einzelnen Eigenschaften werden später durch die Parameter dieser Funktion abgerufen. Durch die Anweisung new in Verbindung mit dem Array-Objekt können wir nun ein neues Objekt mit verschiedenen Instanzen anlegen:

var zelle = new Array(0) zelle[0] = new Tabelle('eins','zwei','drei','vier','fünf')

Durch diese Schreibweise wurde das Objekt "zelle" mit den Eigenschaften zelle.a, zelle.b, zelle.c, zelle.d und zelle.e angelegt. Unser Objekt "zelle[0]" ist somit eine Instanz des Tabelle-Objekts. Nach diesem Muster können Sie nun beliebig weitere Instanzen erzeugen.

var zelle = new Array(5) zelle[0] = new Tabelle('eins','zwei','drei','vier','fünf') zelle[1] = new Tabelle('eins','zwei','drei','vier','fünf') zelle[2] = new Tabelle('eins','zwei','drei','vier','fünf') zelle[3] = new Tabelle('eins','zwei','drei','vier','fünf') zelle[4] = new Tabelle('eins','zwei','drei','vier','fünf')

Um nun alle Eigenschaften der jeweiligen Instanzen auf einmal in sinnvoller Art ausgeben zu können, benötigen wir eine weitere Funktion:

function Ausgabe() { with (document) { write('<TR>') write('<TD>' + this.a + '</TD>') write('<TD>' + this.b + '</TD>') write('<TD>' + this.c + '</TD>') write('<TD>' + this.d + '</TD>') write('<TD>' + this.e + '</TD>') write('</TR>') } }

Mit dieser Funktion haben wir eine neue Methode zu unserem Tabelle-Objekt angelegt. Damit wir diese Methode später auch aufrufen können, müssen wird diese in unser Objekt mit einbinden.

function tabelle(a, b, c, d, e) {
         this.a = a
         this.b = b
         this.c = c
         this.d = d
         this.e = e
         this.Ausgabe = Ausgabe
         }

Möchten Sie nun alle Eigenschaften (Spalteninhalte) von zelle[0] ausgeben, benötigen wir lediglich folgende Anweisung:

document.write('<TABLE BORDER>') zelle[0].Ausgabe() document.write('</TABLE>')

Damit unser Skript das schreiben einer Tabelle vereinfachen kann, müssen wir das Tabellengerüst noch aufbauen. Die einzelnen Zeilen werden dann mit einer Schleife automatisch eingebunden.

document.write('<TABLE BORDER>') for (i=0; i < zelle.length; i++){ zelle[i].Ausgabe() } document.write('</TABLE>')

Dieses Beispiel soll Ihnen nur als Anreiz für eigene Objekte dienen. Wie Sie gesehen haben, ist das Erzeugen eigener Objekte gar nicht schwer und kann u.U. viel Arbeit ersparen. So nun möchten Sie sicherlich unser Beispiel sehen.

Copyright © 1996-1997 Johannes Gamperl. All rights reserved. Alle Rechte vorbehalten.
Kakao & Kekse ist ein Service von J|G Webdesign & Programmierung.