template

Index :: Javascript :: Klassen/OOP

• Konstruktor
• Klassenelemente
• Schnittstellen (Interface-Methoden)
• Vererbung
• Den Prototyp übernehmen
• Polymorphie von this
• Emulation einer Super-Eigenschaft
• Emulation virtueller Klassen
• Hilfsfunktion für normale/virtuelle Vererbung
• Hinzufügen/Überladen von Methoden
• this in privaten Funktionen
• Namensräume (Namespaces)

Konstruktor

Etwas = function() {
...
}

var e = new Etwas();

Person = function(vname, nname, jahr) {
  this.Vorname = vname;
  this.Nachname = nname;
  var MyGebJahr = jahr;
...
}
Erstellung inclusive Initialisierung:
var p = new Person("Daniel", "Düsentrieb", 1950);

Person = function(vname, nname, MyGebJahr) {
  this.Vorname = vname;
  this.Nachname = nname;
...
}

Klassenelemente

Intern deklariert	Beschreibung
	Deklaration
	Beispiel
private Eigenschaft/Variable	Kann nur von privaten Funktionen and privilegierten Methoden gelesen/geschrieben werden.
	Mittels Schlüsselwort var innerhalb der Klasse. Als Parameter im Konstruktor.
	var Nachname = ""; Person = function(Nachname) { ... }
private Funktion	Dient internen Zwecken und kann nur von privilegierten Methoden (inclusive dem Konstruktor) aufgerufen werden.
	Inline im Konstruktor. Via <Funktion> = function() {...} innerhalb der Klasse.
	Klasse = function() { instance = function() { return new Klasse(); }} Sum = function(a, b) { return a + b; }
privilegierte Methode	Kann von ausserhalb aufgerufen aber nicht überschrieben werden; stellt das Interface der Klasse dar.
	Mittels Verwendung von this. vor dem Namen (innerhalb der Klasse).
	this.getHeight = function() { return myHeight; } this.setHeight = function(h) { myHeight = h; }
öffentliche Eigenschaft/Variable	Kann von ausserhalb direkt gelesen und geschrieben werden.
	Mittels Verwendung von this. vor dem Namen (innerhalb der Klasse).
	this.Title = "";
Extern deklariert
öffentliche Methode	Kann von ausserhalb aufgerufen/überschrieben werden; meist nachträgliche Erweiterung der Klasse. Verändert/erweitert die Struktur der Klasse (bzw. des Objekts) und betrifft alle existierenden und zukünftigen Instanzen.
	Wird definiert über den Prototyp der Klasse.
	Person.prototype.Show = function() { alert(this.Nachname); }
Prototyp-Eigenschaft (öffentlich)	Kann von ausserhalb gelesen/geschrieben werden; meist nachträgliche Erweiterung der Klasse. Verändert/erweitert die Struktur der Klasse (bzw. des Objekts) und betrifft alle existierenden und zukünftigen Instanzen.
	Wird definiert über den Prototyp der Klasse.
	Person.prototype.Haarfarbe = "braun";
statische Eigenschaft (öffentlich)	Kann von ausserhalb gelesen/geschrieben werden; gilt global für alle Instanzen.
	Wird über den Klassennamen definiert und innerhalb der Klasse mittels this.constructor modifiziert. Auf diese Weise können z.B. Instanzen gezählt werden.
	Person.Anzahl = 1; this.constructor.Anzahl++;

Mensch = function(name, rasse) {
  this.constructor.Population++;

Private Eigenschaften
  if (!name) name = "John Doe";
  var lebend = true, alter = 1;
  var maxalter = 70 + Math.round(Math.random()*15);
  var gewicht = 1;

Private Funktionen (zum internen Gebrauch)
  function Altern() { return lebend = (++alter <= maxalter) }

Privilegierte Methoden (Interface)
  this.Lebt = function() { return lebend; }
  this.toString = this.Name = function() { return name; }
  this.Essen = function() {
    if (Altern()) { this.SchmutzFaktor++; return gewicht*=3; }
    alert(name +" kann nicht essen, ist tot!");
  } 
  this.Joggen = function() {
    if (Altern()) { this.SchmutzFaktor++; return gewicht/=2; }
    alert(name +" kann nicht joggen, ist tot!");
  } 
  this.Gewicht = function() { return gewicht; } 
  this.Rasse = function() { return rasse; } 
  this.Alter = function() { return alter; } 
  this.ZeitVergeht = function() { alter+=50; this.SchmutzFaktor+=10; } 

Öffentliche Eigenschaften
  this.Kleidung = "keine (ist nackt)";
  this.SchmutzFaktor = 0;
} 

Öffentliche Methoden
Mensch.prototype.CoolSein = function() { this.Kleidung = "Lederhosen und Rüschenhemd"; }
Mensch.prototype.Duschen = function() { this.SchmutzFaktor = 2; }
Mensch.prototype.BeineInfo = function() { alert(this +" hat "+ this.Beine +" Bein(e).") }
Mensch.prototype.Amputation = function() { if (this.Beine) this.Beine--; }

Prototyp-Eigenschaften
Mensch.prototype.Beine = 2;

Statische Eigenschaften
Mensch.Population = 0;

var a = new Mensch("Alfons", "Kaukasisch"); // Alfons wird erzeugt
var b = new Mensch("Berta", "Kaukasisch");  // Berta wird erzeugt
alert("Es gibt nun "+ Mensch.Population +" Menschen.");

a.BeineInfo(); b.BeineInfo();    // für beide wird die Anzahl ihrer Beine angezeigt

a.rasse = "Spanisch";            // erzeugt eine neue öffentl. Eigenschaft 'rasse'
                                 // die private Eigenschaft 'rasse' bleibt davon unberührt
alert(a +"'s wirkliche Rasse ist "+ a.Rasse());

a.Essen(); a.Essen(); a.Essen(); // Das Gewicht wächst an auf 3 ... auf 9 ... auf 27 
alert(a +" wiegt "+ a.Gewicht() +" Kilo und besitzt Schmutzfaktor "+ a.SchmutzFaktor);

a.Joggen();                      // Gewicht beträgt nun 13.5
a.CoolSein();                    // Kleidung wird an die Mode angepasst
a.Kleidung = "Schlabber-Outfit"; // Kleidung wird wieder gewechselt
a.Duschen();                     // Körperhygiene
alert("Nach dem Duschen ist der Schmutzfaktor von "+ a +" auf "+ a.SchmutzFaktor +" gesunken.");

a.ZeitVergeht();                 // tja, Alfons, 50 Jahre vergehen wie im Flug
Mensch.prototype.Duschen = function() { // die Duschtechnologie verbessert sich für alle
  this.SchmutzFaktor = 0;
} 
a.CoolSein = function() {        // Alfons hat eigene Vorstellungen...
  this.Kleidung = "Leopardenfellmantel mit nix drunter";
}
a.CoolSein();                    // ... und zieht sich gleich mal um 
a.Duschen();                     // Ausprobieren der neuen Dusche
alert("Der topmodische "+ a.Alter() +"-jährige "+ a +" trägt nun "+
  a.Kleidung +" und hat Schmutzfaktor "+ a.SchmutzFaktor);

a.Amputation();                  // hoppla, böser Unfall
a.BeineInfo(); b.BeineInfo();    // Alfons humpelt, Berta ist noch komplett

a.ZeitVergeht(); // für Alfons bleibt die Uhr nicht stehen
                 // er ist jetzt über 100
a.Essen();       // geht leider nicht, Alfons liegt schon unter der Erde

Schnittstellen (Interface-Methoden)

Area = function() {
  this.width = 0;
}

Area = function() {
  var _width = 0;
  this.getWidth() = function() { return _width; }
  this.setWidth() = function(w) { if (w>=0) _width = w; }
}

Area = function() {
  var _width = 0;
  this.width() = function(w) {
    if (w != null) if (w>=0) _width = w;
    return _width;
  }
}

var a = new Area();
a.width(300);     // Schreiben
alert(a.width()); // Lesen

alert(a.width(300));

Vererbung

• Die Kindklasse beerbt eine Basisklasse mittels KindKlasse.prototype = new BasisKlasse()
• Da auch der Konstruktor geerbt wird, sollte dieser wieder auf den eigenen zurückgesetzt werden.
  Dies geschieht mittels KindKlasse.prototype.constructor = KindKlasse
• Um Basisklassenmethoden aufzurufen, die von der Kindklasse überschrieben wurden, kann Function.call() verwendet werden.

• Den Prototyp übernehmen
• Polymorphie von this
• Emulation einer Super-Eigenschaft
• Emulation virtueller Klassen
• Hilfsfunktion für normale/virtuelle Vererbung

Vererbung :: Den Prototyp übernehmen

Haustier
function Haustier(name) {
  this.Name = name;
  this.Nachkommen = [];
}
Haustier.prototype.HatEinBaby = function() {
  var baby = new Haustier("Baby von "+ this.Name);
  this.Nachkommen.push(baby);
  return baby;
}
Haustier.prototype.toString = function() {
  return '[Haustier "'+ this.Name +'"]';
}
Katze
function Katze(name) {
  this.Name = name;
} 
Katze.prototype = new Haustier();    // hier findet die Vererbung statt
Katze.prototype.constructor = Katze; // (sonst hätten Katzen den Haustier-Konstruktor)
Katze.prototype.toString = function() {
  return '[Katze "'+ this.Name +'"]';
} 
...
var koeter = new Haustier("Wuffi");
var liebling = new Katze("Mohrle");
alert("köter ist "+ koeter);       // Anzeige: 'köter ist [Haustier "Wuffi"]' 
alert("liebling ist "+ liebling);  // Anzeige: 'liebling ist [Katze "Mohrle"]' 

liebling.HatEinBaby();             // ruft eine von Haustier geerbte Methode
alert(liebling.Nachkommen.length); // zeigt, dass die Katze nun 1 Nachkommen hat
alert(liebling.Nachkommen[0]);     // Anzeige: '[Haustier "Baby von Mohrle"]'

Vererbung :: Polymorphie von this

...
Haustier.prototype.HatEinBaby = function() {
  var baby = new this.constructor("Baby von "+ this.Name);
  this.Nachkommen.push(baby);
  return baby;
}
...
liebling.HatEinBaby();         // das Baby benutzt jetzt den Katzenkonstruktor
alert(liebling.Nachkommen[0]); // Anzeige: '[Katze "Baby von Mohrle"]'

Vererbung :: Emulation einer Super-Eigenschaft

...
Katze.prototype.HatEinBaby = function() {
  alert("maunz!"); // das individuelle Ereignis bei einer Katzengeburt
  return Haustier.prototype.HatEinBaby.call(this);
}
...

...
Katze.prototype.Basis = Haustier.prototype;
...
Katze.prototype.HatEinBaby = function() {
  alert("maunz!"); // das individuelle Ereignis bei einer Katzengeburt
  return this.Basis.HatEinBaby.call(this);
}
...

Vererbung :: Emulation virtueller Klassen

Lebewesen (virtuell)
Lebewesen = {
  Lebt : false,
  Geburt : function() { this.Lebt = true; },
  Tod : function() { this.Lebt = false; }
}
Haustier
function Haustier(name) {
  this.Name = name;
  this.Nachkommen = [];
  this.Basis.Geburt.call(this); // Aufruf einer Lebewesen-Methode
}
Haustier.prototype = Lebewesen;       // hier findet die (virtuelle) Vererbung statt
Haustier.prototype.Basis = Lebewesen; // Beachte: nicht 'Lebewesen.prototype'
...

Vererbung :: Hilfsfunktion für normale/virtuelle Vererbung

Function.prototype.erbtVon = function(obj) {
  if (typeof obj == "function") { //---- normale Vererbung
    this.prototype = new obj;
    this.prototype.constructor = this;
    this.prototype.Basis = obj.prototype;
  } else { //---- virtuelle Vererbung
    this.prototype = obj;
    this.prototype.constructor = this;
    this.prototype.Basis = obj;
  } return this;
}
...
Lebewesen = {
  Lebt : false,
  Geburt : function() { this.Lebt = true; },
  Tod : function() { this.Lebt = false; }
} 
...
function Haustier(name){ 
  this.Name = name;
  this.Nachkommen = [];
  this.Basis.Geburt.call(this);
} 
Haustier.erbtVon(Lebewesen);
...
function Katze(name) { 
  this.Name = name;
} 
Katze.erbtVon(Haustier);
...
var liebling = new Katze("Mohrle");
var liebling2 = liebling.HatEinBaby(); // maunz!
alert(liebling2);                      // Anzeige: '[Katze "Baby von Mohrle"]'

Hinzufügen/Überladen von Methoden

Array.prototype.index = function(elem) {
  var i = this.length; while(i--) if (this[i]===elem) return i;
  return -1;
}

var arr = ["a", "b", "c", "d"]; // Testarray
alert(arr.index("c")); // liefert '2'
alert(arr.index("x")); // liefert '-1'

Array.prototype.push = function(str) {
  this[this.length] = str.toUpperCase();
}

this in privaten Funktionen

Klasse = function() {
  var self = this; // Speicherung in self

  function Info() { ... }        // Info privat
  this.Info = function() { ... } // Info privilegiert

Private Funktion
  function Test() {
    Info();      // Aufruf von Info privat
    self.Info(); // Aufruf von Info privilegiert = this.Info()
    this.Info(); // Aufruf von Info extern       = window.Info()
  }
Privilegierte Funktion
  this.Test = function() {
    Info();        // Aufruf von Info privat
    this.Info();   // Aufruf von Info privilegiert
    window.Info(); // Aufruf von Info extern
  }
}
function Info() { ... } // Info extern

Namensräume (Namespaces)

var desk = {};

desk.window = function() { ... }
desk.menu = function() { ... }
desk.dialog = function() { ... }

var desk = {
  window : function() { ... },
  menu   : function() { ... },
  dialog : function() { ... }
};

Index :: Javascript

template