Klassen nachbilden

Dieses Kapitel soll für die sorgfältige Verwendung von Variablen empfindlich machen!

Eigenschaften einer Klasse schreiben

Auch in JavaScript kann das Prinzip von Klassen angewendet werden.

Schritte für das Beispiel Rechteck:

Klassennamen werden immer als Hauptwort geschrieben.

a) Ein Rechteck kann durch die Länge zweier Seiten beschrieben werden.
Die Klasse Rechteck wird wie eine Funktion deklariert:

function Rechteck ()

Die Eigenschaften werden innerhalb der Function mit this. deklariert

Damit weiß jedes neue erzeugte Rechteck, wie breit und hoch es ist.

{
    this.breite;
    this.hoehe;
}

Damit lautet die vollständige Formulierung für das Objekt Rechteck:

function Rechteck (b,h){
    this.breite = b;
    this.hoehe = h;
}

Objekt erzeugen

var trennwand = new Rechteck();

erzeugt ein Objekt der Klasse Rechteck mit den Namen trennwand.

var trennwand = new Rechteck(3,4);

erzeugt das Objekt trennwand von der Klasse Rechteck mit einer Breite von 3 und einer Höhe von 4.

trennwnand.breite = 5

ändert die breite der trennwand auf 5

alert(trennwnad.breite)

meldet die Breite von der trennwand

Beispiel 1

 // Die Klasse
 function Rechteck(b, h) {
     "use strict";
     this.breite = b;
     this.hoehe = h;
 }

 // Das Objekt der Begierde
 var trennwand = new Rechteck(3, 2);

 // breite neu setzen
 trennwand.breite = 12;

 // breite lesen und ausgeben
 alert(trennwand.breite);

Anwendung 1

Methoden für die Klasse schreiben

Was jetzt noch fehlt, ist die Berechnung der Fläche. Da sich diese Funktion auf die Werte des Objektes bezieht, wird auch hier wieder das Schlüsselwort this verwendet.

function Rechteck (b,h){
    this.breite = b;
    this.hoehe = h;

    this.flaeche = function() {
          return this.breite * this.hoehe;
         }
  }

Damit können Sie nun dieses Programm schreiben:

Beispiel 2:

 function Rechteck (b,h){
        "use strict";
	this.breite = b;
	this.hoehe = h;
    this.rechnerum = 3*5;
	this.flaeche = function(){return (this.breite * this.hoehe)};
 }
 
Anton = new Rechteck (2,3);
Berta = new Rechteck (15,8);

a = Anton.flaeche();
b = Berta.flaeche();

document.write("Anton: " + a);
document.write("<br>");
document.write("Berta: " + b);

Anwendung 2

set und get für die Eigenschaften einer Klasse

Sollen die Variablen innerhalb der Klasse unangetastet bleiben, dann verstecke ich sie innerhalb der Funktion und verwende nur Methoden um die Variablenwerte zu setzen oder zu lesen

Statt this.breite (global, öffentlich!!) erzeuge mit var breite (lokal, privat) eine nur innerhalb dieser Klasse verwendbare Variable, Eine mit var deklarierte Eigenschaft einer Klasse kann leider direkt verändert werden. Die Änderung ist allerdings wegen der Gültigkeit intern wirkungslos. Die Eigenschaft kann auch nicht mehr von aussen gelöscht werden! Leider gibt es keine Fehlermeldungen. Siehe dazu die Anwendung 3 genau an!

 // die KLasse Rechteck
 function Rechteck() {
     "use strict";
     // alle Variablen
     var breite = 0;
     var hoehe = 0;

     // Methoden um Variablen-Wert zu setzen
     this.setBreite = function(p) {
         breite = p;
         }   
     this.setHoehe = function(p) {
         hoehe = p;
         }
    // Methoden um Variablen-Wert zu lesen

     this.getBreite = function() {
         return breite;
         }
     this.getHoehe = function() {
         return hoehe;
         }
 
}

Eigenschaften und Werte eines Objektes auslesen

Alle Eigenschaften eines Objektes (Beispiel des document Objektes) können folgendermaßen abgefragt werden:

<script>
 function Rechteck(b, h) {
     "use strict";
     this.breite = b;
     this.hoehe = h;
    
     this.flaeche = function () {
                        return this.breite * this.hoehe;
                        }
 }

var kueche = new Rechteck(2, 3);
var i = 0;

for (i in kueche) {
    document.write(i + " = " + kueche[i] + "<br>");
}
</script>

Anwendung 4