OOP in JavaScript || Objekte

In JavaScript dreht sich so ziemlich alles um Objekte, was genau ist also ein Objekt? Objekte bestehen aus verschiedenen Eigenschaften und Methoden (Aktionen), wobei genaugenommen jede Methode auch eine Objekteigenschaft ist. Solch eine Eigenschaft wird immer aus einem Eigenschaftsnamen als String sowie einem Eigenschaftswert beliebigen Datentyps zusammengesetzt. Spricht man beispielsweise von einem Auto so könnte dieses Eigenschaften wie Hersteller, Farbe oder Höchstgeschwindigkeit besitzen mögliche Methoden wären beschleunigen oder abbremsen. In JavaScript unterscheidet man zwischen:

Erstere sind fest im JavaScript - Standart verankert, einige Beispiele dieser Kategorie sind String, Number, Array oder Math. Als Host Objekte werden jene Objekte bezeichnet welche vom Browser implementiert werden dazu zählt beispielsweise das window, document oder form Objekt. Userdefinierte Objekte hingegen können wie der Namen unschwer erkennen lässt vom User erstellt werden, im weiteren werden wir uns hauptsächlich mit dieser Art von Objekten beschäftigen.

Objekte erstellen

Es gibt verschiedene Wege um ein Objekt zu erzeugen. Einer davon ist mittels objectname = new Object() oder in der Kurzfassung

objectname 
  = {};

. Diese Form von Objekten ist sehr unflexibel und dient eigentlich nur der Datenspeicherung.

myobject = new Object();
myobject = {};

Bis jetzt ist myobject lediglich ein leeres Objekt, es besitzt aber bereits ein paar Eigenschaften wie auch Methoden die es von Object erbt:

Dem Objekt kann man nun sowohl eigene Eigenschaften wie auch Methoden geben. Dafür gibt es wiederum verschiedene Möglichkeiten entweder

objectname.property 
  = value

oder direkt beim erstellen mittels

objectname = { property1 
  : value1, propertyN : valueN };

Verschachtelung ist übrigens kein Problem, man kann also beliebig viele Objekte ineinander erstellen. Nachfolgend wird anhand eines me - Objektes die jeweilige Schreibweise verdeutlicht.

me = { 
	name : "marc",
	age : 17,
	sex : "male",
	hobby : ["webdesign","sport"]
	cat : { 
		name : "mycat",
		age : 6
	}
};

me = new Object();
me.name = "marc";
me.age = 17;
me.sex = "male";
me.hobby = ["webdesign","sport"];
me.cat = new Object();
me.cat.name = "mycat";
me.cat.age = 6;

alert(me.name);		// "marc"
alert(me.age);		// 17
alert(me.sex);		// "male"
alert(me.hobby[0]);	// "webdesign"
alert(me.hobby[1]); 	// "sport"
alert(me.cat.name); 	// "mycat"
alert(me.cat.age); 	// 6

Objekte als assoziative Arrays

Bislang haben wir die Eigenschaften eines Objektes mittels der sogenanten Dot - Syntax object.property angesprochen, auf jedes Objekt kann aber auch als assoziatives Array mittels object["property"] zugegriffen werden. In der folgenden Codesequenz werden die verschiedenen Zugriffsformen aufgezeigt:

me = { 
	name : "marc",
	age : 17,
	sex : "male",
	hobby : ["webdesign","sport"]
};

me = new Object();
me.name = "marc";
me.age = 17;
me.sex = "male";
me.hobby = ["webdesign","sport"];

me = new Object();
me["name"] = "marc";
me["age"] = 17;
me["sex"] = "male";
me["hobby"] = ["webdesign","sport"];

alert(me["name"]); 	// alert(me.name);	// "marc"
alert(me["age"]); 	// alert(me.age);	// 17
alert(me["sex"]); 	// alert(me.sex);	// "male"
alert(me["hobby"][0]); 	// alert(me.hobby[0]);	// "webdesign"
alert(me["hobby"][1]); 	// alert(me.hobby[1]);	// "sport"

Diese Erkenntnis erleichtert das Arbeiten mit Variablen im Zusammenhang mit Objekten enorm. Man kann auf die Objekte als assoziative Arrays zugreifen und so sehr einfach Variablen verwenden wo man sonst auf eval() zurückgreifen müsste. Es ermöglicht einem auch alle Eigenschaften eines Objektes mittels einer for in Schleife zu durchlaufen, dabei werden sowohl Eigenschaften wie auch Methoden berücksichtigt.

myobject = { 
	name : "marc",
	sex : "male",
	age : 17,
	getAge : function(){ return this.age; }
};

var output = "";

for ( x in myobject ){
	output += x + " || " + myobject[x] + "\n";
}

alert(output)

/*

name || marc
sex || male
age || 17
getAge || function(){ return this.age; }

*/