OOP in JavaScript

Weiterbildung ist ein Hauptthema bei den “IT-Team Meetings”, welche wir jede Woche durchführen. Gestern hat Ciprian uns eine Einführung in Objektorientierte JavaScript-Entwicklung gegeben.

Denn tausende Zeilen unstrukturierter Code ist bei komplexen RIA-Projekten ein Wartungs-Albtraum. Deshalb wird bei unseren nächsten Projekten Wert auf eine saubere Struktur gelegt.

Faszinierend an Javascript (offiziell ECMAScript genannt) ist das Objektkonzept. Bei PHP unterscheidet man zwischen Klassen und Objekten. Eine Klasse wird vor der Ausführung des Programms definiert und dann zur Laufzeit instanziert. Bei Javascript sind Klassen wie Objekte behandelt. Genau genommen instanziert man also ein Objekt und nicht eine Klasse, um sich ein Objekt zu erzeugen.

Das braucht uns bei der Implementierung noch nicht zu kümmern. Dank dem Javascript-Framework prototype.js kann man in JS mit Objekten und Klassen ganz ähnlich wie in PHP umgehen:

PHP:
[source:php]

// Definition der Klasse
class Person
{
protected $i_age;

public function Person($i_age)
{
$this->i_age=$i_age;
}

public function getAge()
{
return $this->i_age;
}
}

// Instanzierung
$o_person=new Person(18);

// Anwendung
echo $o_person->getAge();
[/source]

Javascript (mit prototype.js)
[source:JavaScript]
Person=Class.create();

Person.prototype =
{
i_age: 0,

initialize: function(i_age)
{
this.i_age=i_age;
},

getAge: function()
{
return this.i_age;
}

}

o_kurt=new Person(17);
document.write(“Age of Kurt:”+o_kurt.getAge()+”
“)
[/source]

Auf Klassen kann man somit wie auf Objekte zugreifen. Man kann der Klasse somit zur Laufzeit neue Methoden und Klassenvariablen hinzufügen. Dies macht man, indem man auf die spezielle Eigenschaft prototype des Objekts zugreift, und dieser neue Methoden oder Klassenvariablen zuordnet. Die Eigenschaft prototype zeigt auf die Vorlage des Objekts, den Prototypen. Bei einem Objekt ist die Vorlage also die Klasse.

Ich erweitere also das Skript von vorhin mit folgenden Zeilen:
[source:JavaScript]
// Code von Oben. o_kurt ist bereits instanziert.

// Erweiterung der Klasse zur Laufzeit
Person.prototype.allowedToDrive=function()
{
return this.i_age>=18;
}

o_paula=new Person(22);

// Methode ist in allen Objekten nun Verfügbar
document.write(“Kurt is allowed to drive? “+o_kurt.allowedToDrive()+”
“)
document.write(“Paula is allowed to drive?”+o_paula.allowedToDrive()+”
“)
[/source]

Nachdem die Klasse generiert worden ist, können also noch zusätzliche Methoden oder Klassenvariablen hinzugefügt werden.

Mehr Informationen zum Thema findet ihr zum Beispiel hier.