| Titel: | JavaScript Obekt und Objektfunktionen | |
| Beschreibung: | Wie man in JavaScript Mit Objekten eine Klasse nachbilden kann | |
| Kategorie: | Programmierung | |
| Unterkategorie | JavaScript | |
| Benötigtes Fachwissen: | Fortgeschrittene Anfänger | |
| Artikel überarbeiten: | JavaScript Obekt und Objektfunktionen | |
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); }
// 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
/** * @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
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
// So ist es bei einem Objekt richtig var thisTmp = this; window.setTimeout(function(){thisTmp.start();}, 100);