Mit Objekten arbeiten

  • Adressname der Version: JavaScript/javascript_guide/Mit_Objekten_arbeiten
  • Titel der Version: Mit Objekten arbeiten
  • ID der Version: 372787
  • Erstellt:
  • Autor: eminor
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

Die Sprache JavaScript wurde nach einem einfachen objektbasierten Paradigma gestaltet. Ein Objekt besteht aus einer Zusammenstellung von Eigenschaften. Eine Eigenschaft ist eine Verknüfung eines Namens mit einem Wert. Der Wert einer Eigenschaft kann auch eine Funktion sein. Eine Funktion, die einem Objekt zugeordnet ist, nennt man Methode. Zusätzlich zu den Objekten, die im Browser vordefiniert sind (DOM), können auch eigene Objekte erstellt werden.

Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt werden und wie man eigene Objekte erstellt.

Übersicht zu Objekten

Objekte in JavaScript können, wie auch bei anderen Programmiersprachen, mit Objekten in der realen Welt verglichen werden. Gegenstände aus der realen Welt können zur Veranschaulichung des Konzepts dienen.

Bei JavaScript ist ein Objekt eine eigenständige Einheit mit Eigenschaften und einem Typ. Ein Objekt könnte z. B. eine Tasse sein. Eine Tasse ist ein Objekt mit bestimmten Eigenschaften. Sie hat eine Farbe, ein Design, ein Gewicht, ist aus einem bestimmten Material gefertigt usw. Auf dieselbe Art und Weise besitzen JavaScript-Objekte Eigenschaften, womit deren Merkmale definiert werden.

Objekte und Eigenschaften

Ein JavaScript-Objekt hat Eigenschaften, die mit dem Objekt verknüpft sind. Objekteigenschaften sind im Prinzip dasselbe, wie normale Variablen, außer dass sie zusätzlich einem Objekt zugeordnet sind. Der Zugriff auf eine Eigenschaft kann mit Hilfe der Punkt-Notation erfolgen:

objectName.propertyName

Wie auch bei normalen Variablen gilt es sowohl bei Objektnamen als auch bei deren Eigenschaften zwischen Groß- und Kleinschreibung zu unterscheiden. Eine Eigenschaft wird definiert, indem man dieser Eigenschaft einen Wert zuweist. Wir erstellen zum Beispiel ein Objekt mit dem Namen myCar and geben diesem Objekt drei verschiedene Eigenschaften make, model und year:

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

Eigenschaften von JavaScript-Objekten können auch mit Hilfe der Klammer-Notation definiert und angesprochen werden. Objekte werden manchmal assoziative Arrays genannt, da jede Eigenschaft mit einem String-Wert verknüpft ist, über den auf die Eigenschaft zugegriffen werden kann. Zum Beispiel können die Eigenschaften des Objekts myCar wie folgt definiert werden:

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

Der Name einer Objekteigenschaft kann jeder beliebige JavaScript-String und auch alles sein, was zu einem String konvertiert werden kann, einschließlich der leere String. Jedoch lassen sich Eigenschaftsnamen, die keine gültigen JavaScript-Bezeichner sind (z. B. Eigenschaftsnamen, die Leerzeichen oder Bindestriche enthalten oder mit einer Ziffer beginnen) nur über die Klammer-Notation ansprechen. Diese Notation ist außerdem sehr nützlich, wenn Eigenschaftsnamen dynamisch festgelegt werden, also wenn der Name der Eigenschaft erst während der Laufzeit festgelegt wird.

Ein paar Beispiele:

var myObj = new Object(),
    str = "myString",
    rand = Math.random(),
    obj = new Object();

myObj.type              = "Dot syntax";
myObj["date created"]   = "String with space";
myObj[str]              = "String value";
myObj[rand]             = "Random Number";
myObj[obj]              = "Object";
myObj[""]               = "Even an empty string";

console.log(myObj);

Der Eigenschaftsname kann auch in einer Variablen gespeichert und die Eigenschaft dann über diese Variable angesprochen werden:

var propertyName = "make";
myCar[propertyName] = "Ford";

propertyName = "model";
myCar[propertyName] = "Mustang";

Mit Hilfe der Klammer-Notation in Kombination mit for...in ist es möglich, über alle zählbaren Eigenschaften eines Objekts zu iterieren. Die folgende Funktion gibt alle Eigenschaften eines Objekts aus. Das Objekt und dessen Name werden als Argumente übergeben.

function showProps(obj, objName) {
  var result = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        result += objName + "." + i + " = " + obj[i] + "\n";
    }
  }
  return result;
}

Der Funktionsaufruf showProps(myCar, "myCar") würde folgendes zurückgeben:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969

Fast alles ist ein Objekt

Bei JavaScript ist fast alles ein Objekt. Alle einfachen Typen, mit Ausnahme von null und undefined, werden wie Objekte behandelt. Sie können zugewiesene Eigenschaften sein (Eigenschaften mancher Typen sind nicht beständig) und haben alle Merkmale von Objekten.

Durchlaufen von Objekteigenschaften

Ab ECMAScript 5 gibt es drei verschiedene Möglichkeiten, um Objekteigenschaften aufzulisten oder zu durchlaufen:

  • for...in-Schleifen
    Diese Methode durchläuft alle aufzählbaren Eigenschaften eines Objekts und seines Prototyps.
  • Object.keys(o)
    Diese Methode gibt ein Array mit allen eigenen aufzählbaren Eigenschaftsnamen (Schlüssel) eines Objekts o zurück.
  • Object.getOwnPropertyNames(o)
    Diese Methode gibt ein Array mit allen Eigenschaftsnamen (aufzählbar oder nicht) eines Objekts o zurück.

Bei ECMAScript 5 gibt es keine vordefinierte Funktion, um alle Eigenschaften eines Objekts zu durchlaufen. Hier kann die folgende Funktion aushelfen:

function listAllProperties(o){     
	var objectToInspect;     
	var result = [];
	
	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){  
		result = result.concat(Object.getOwnPropertyNames(objectToInspect));  
	}
	
	return result; 
}

Das Durchlaufen der Eigenschaften kann nützlich sein, um "versteckte" Eigenschaften aufzudecken (Eigenschaften des Prototype, die nicht über das Objekt ansprechbar sind, weil eine andere frühere Eigenschaft des Prototype denselben Namen hat). Es können auch nur die ansprechbaren Eigenschaften aufgelistet werden, indem einfach doppelte Namen aus dem Array entfernt werden.

Erstellung von neuen Objekten

Bei JavaScript sind eine Reihe von Objekten bereits vordefiniert. Zusätzlich können eigene Objekte erstellt werden. Bei JavaScript 1.2 und neuer können Objekte mit Hilfe eines Objekt-Literals erstellt werden. Alternativ kann auch zuerst eine Konstruktorfunktion erstellt werden und dann Instanzen von Objekten mit Hilfe dieser Funktion und dem new-Operator erstellt werden.

Benutzung von Objekt-Literalen

Auch mit Hilfe von Objekt-Literalen (auch Objekt-Initialisierer genannt) können Objekte erstellt werden. Die Benutzung von Objekt-Literalen wird als die "buchstäbliche" Notation zum Erstellen von Objekten bezeichnet. Die Bezeichnung Objekt-Initialisierung ist gleichbedeutend mit der Terminologie der Programmiersprache C++.

Syntax für ein Objekt, das über einen Objekt-Literal erstellt wird:

var obj = { property_1:   value_1,   // property_# may be an identifier...
            2:            value_2,   // or a number...
            // ...,
            "property n": value_n }; // or a string

wobei obj der Name des Objekts ist, jedes property_i eine Eigenschaft bzw. ein Bezeichner (Name, Zahl, oder String) und jedes value_i ein Ausdruck, dessen Wert der jeweiligen Eigenschaft zugewiesen ist. Das obj und die Zuweisung ist optional; wenn nicht an anderer Stelle auf das Objekt verwiesen werden soll, muss die Variable nicht erstellt werden. (Achtung: Wenn der Code an einer Stelle steht, wo eine Anweisung erwartet wird, muss sie er in Klammern eingeschlossen werden, damit keine Verwechslung mit einer Blockanweisung passiert).

Wenn ein Objekt mit Hilfe eines Objekt-Literals in einem Top-Level-Script erstellt wird, interpretiert JavaScript das Objekt jedesmal, wenn ein Ausdruck ausgewertet wird, der das Objekt-Literal enthält. Befindet sich der Code für das Objekt-Literal innerhalb einer Funktion, wird es bei jedem Funktionsaufruf erstellt.

Die folgende Anweisung erstellt ein Objekt und weist es der Variablen x zu, falls (und nur dann) die Bedungung cond zu true evaluiert.

if (cond) var x = {hi: "there"};

Das folgende Beispiel zeigt die Erstellung das Objekts myHonda mit drei Eigenschaften. Die Eigenschaft engine ist ebenfalls ein Objekt mit eigenen Eigenschaften.

var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};

Auch mit Objekt Literalen können Arrays erstellt werden, siehe Array Literale.

Bei JAvaScript 1.1 und früher können Objekt-Literale nicht eingesetzt werden. Objekte können nur mit Hilfe der Konstruktorfunktionen oder einer Funktion, die durch ein anderes Objekt bereitgestellt wird und diese Aufgabe erledigt, erstellt werden (Siehe nächster Abschnitt).

Benutzung einer Konstruktor-Funktion

Alternativ kann ein Objekt über die beiden folgenden Schritte erstellt werden:

Definition des Objekttyps durch Schreiben einer Konstruktorfunktion. Es gibt eine Übereinkunft, dass man für diese Funktion einen großen Anfangsbuchstaben verwendet. Erstellen einer Instanz des Objekts mit Hilfe von new.

Zur Defintion des Objekttyps wird eine Funktion für diesen Typ erstellt, welche den Namen, die Eigenschaften und Methoden enthält. Angenommen es soll ein Objekttyp für Automobile erstellt werden. Das Objekt soll car heißen und die drei Eigenschaften make, model und year besitzen. Dann definiert man eine Funktion Car, welche die Werte für die Eigenschaften als Parameter entgegennimmt:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Bei dieser Funktion wird das Schlüsselwort this eingesetzt, um den Eigenschaften des Objekts die Werte der Argumente zuzuweisen.

Anschließend kann mit Hilfe dieser Funktion ein Objekt mycar erstellt werden:

var mycar = new Car("Eagle", "Talon TSi", 1993);

Mit dieser Zuweisung wird das Objekt mycar erstellt und die Argumentwerte werden den Eigenschaften zugewiesen. Die Eigenschaft mycar.make bekommt den Wert "Eagle", mycar.year den Wert 1993 usw.

Über den Aufruf von new können beliebig viele Objekte erstellt werden. Zum Beispiel:

var kenscar = new Car("Nissan", "300ZX", 1992);
var vpgscar = new Car("Mazda", "Miata", 1990);

Ein Objekt kann eine Eigenschaft haben, die selbst wieder ein Objekt ist. Angenommen man erstellt ein Objekt Person wie folgt:

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

Und erzeugen dann zwei Instanzen dieses Objekts:

var rand = new Person("Rand McKinnon", 33, "M");
var ken = new Person("Ken Jones", 39, "M");

Dann kann man die Funktion Car erweitern, damit das Objekt eine weitere Eigenschaft owner besitzt, der ein Person-Objekt zugewiesen werden kann:

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

Nun können Instanzen des Objekts wie folgt erzeugt werden:

var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
var car2 = new Car("Nissan", "300ZX", 1992, ken);

Hierbei wern nun nicht nur String- und Integer-Werte, sondern auch jeweils ein Besitzer-Objekt (rand und ken) an die Funktion übergeben. Den Besitzer von car1 kann man nun z. B. über folgende Eigenschaft herausfinden:

car2.owner.name

Eigenschaften können jederzeit zu einem bereits vordefinierten Objekt hinzugefügt werden. Diese Zuweisung:

car1.color = "black";

fügt dem Objekt car1 die Eigenschaft color mit dem Wert "black" hinzu. Dies betrifft allerdings keine der anderen Instanzen. Um allen Instanzen die neue Eigenschaft hinzuzufügen, muss die Definition des car Objekttyps erweitert werden.

Benutzung der Methode Objekt.create

Objekte können auch mit Hilfe der Methode Object.create erstellt werden. Dieser Methode kann sehr nützlich sein, da sie erlaubt, das entsprechende Prototype-Objekt ohne die Definition einer Konstruktorfunktion auszuwählen. Weitere Informationen findet man in der Referenz.

Vererbung

Alle Objekte bei JavaScript erben von wenigstens einem anderen Objekt. Das Objekt, von dem geerbt wird, nennt man Prototype. Die vererbten Eigenschaften können im Prototyp-Objekt des Konstruktors gefunden werden.

Indexieren von Objekt-Eigenschaften

Bei JavaScript 1.0 kann über den Namen oder den Index auf die Eigenschaft eines Objekt zugegriffen werden. Bei JavaScript 1.1 und neuer muss der Zugriff auf eine Eigenschaft wieder über den Namen erfolgen, wenn sie über den Namen definiert wurde und über den Index, wenn sie über den Index definiert wurde.

Diese Beschränkung gilt sowohl für Objekte und ihre Eigenschaften, wenn sie über die Konstruktorfunktion erstellt wurden (wie im vorherigen Abschnitt beim car-Objekt) als auch wenn verschiedene Eigenschaften explizit definiert werden (zum Beispiel myCar.color = "red"). Wenn man anfänglich eine Objekt-Eigenschaft über ihren Index definiert, z. B. myCar[5] = "25 mpg", so lässt sich diese Eigenschaft später nur über myCar[5] ansprechen.

Eine Ausnahme für diese Regel gibt es bei Objekten, die von HTML stammen, wie z. B. dem forms-Array. Auf diese Objekte kann entweder über ihre Nummer (basierend darauf, wo sie im Dokument vorkommen) oder ihren Namen (falls definiert) zugegriffen werden. Wenn im Dokument z. B. das zweite Formular-Tag <FORM> ein NAME-Attribute mit dem Wert "myForm" hat, kann dieses Formular über document.forms[1], document.forms["myForm"] oder document.myForm angesprochen werden.

Definition von Eigenschaften für einen Objekttyp

Einem zuvor definierten Objekt können mit Hilfe des Prototyp neue Eigenschaften zugeordnet werden. Auf diese Weise wird die Eigenschaften von allen Instanzen geteilt. Der folgende Code fügt allen Objekten vom Typ car eine Farbeigenschaft hinzu und weist der Eigenschaft von cor1 einen Wert zu.

Car.prototype.color = null;
car1.color = "black";

Im Abschnitt zu den Eigenschaften des Function-Objekts in der JavaScript Referenz findet man weiter Informationen.

Defintion von Methoden

Eine Methode ist eine Funktion die mit einem Objekt verknüpft ist. Anders ausgedrückt: Eine Methode ist eine Eigenschaft eines Objekts, die eine Funktion ist. Methoden werden genauso wie normale Funktionen definiert, außer dass sie einem Objekt zugeordnet werden müssen.

Beispiele:

objectName.methodname = function_name;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }
};

Bei diesem Beispiel ist objectName ein existierendes Objekt, methodname ist der Name der Methode und function_name, der Name einer Funktion die sich später über methodname wie folgt aufrufen lässt:

object.methodname(params);

Methoden können für einen Objekttyp definiert werden, indem sie innerhalb einer Konstruktorfunktion definiert werden. Zum Beispiel knnte man eine Funktion definieren, welche die Eigenschaften des zuvor definierten car-Objekts formatiert und auflistet:

function displayCar() {
  var result = "A Beautiful " + this.year + " " + this.make
    + " " + this.model;
  pretty_print(result);
}

wobei pretty_print eine Funktion ist, welche eine horizontale Linie und einen String ausgibt. Beachten Sie die Verwendung des Schlüsselworts this, womit auf das Objekt verwiesen wird.

Diese Funktion kann man zu einer Methode des Objekts car machen, indem man folgende Zuweisung der Objektdefinition hinzufügt.

this.displayCar = displayCar;

Die ganze Definition des Objekts car ist dann wie folgt:

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayCar = displayCar;
}

Anschließend kann man die Methode displayCar wie folgt aufrufen:

car1.displayCar();
car2.displayCar();
 
Dies produziert eine Ausgabe wie im folgenden Bild:
 

Image:obja.gif

Figure 7.1: Ausgabe der Methode.

Benutzung von this zur Objektreferenzierung

Javascript besitzt das spezielle Schlüsselwort this, das man innerhalb von Methoden benutzen kann, um auf das aktuelle Objekt zu verweisen. Wenn man zum Beispiel eine Funktion mit Namen validate hat, die einen Wert einer Objekteigenschaft validiert und der zwei Grenzwerte und als Parameter übergeben werden:

function validate(obj, lowval, hival) {
  if ((obj.value < lowval) || (obj.value > hival))
    alert("Invalid Value!");
}

Dann kann man die Funktion für jedes Formular-Element über den onchange-event-Handler aufrufen und mit Hilfe von this das Element übergeben:

<input type="text" name="age" size="3"
  onChange="validate(this, 18, 99)">

 

Quelltext der Version

<p>Die Sprache JavaScript wurde nach einem einfachen objektbasierten Paradigma gestaltet. Ein Objekt besteht aus einer Zusammenstellung von Eigenschaften. Eine Eigenschaft ist eine Verknüfung eines Namens mit einem Wert. Der Wert einer Eigenschaft kann auch eine Funktion sein. Eine Funktion, die einem Objekt zugeordnet ist, nennt man <em>Methode</em>. Zusätzlich zu den Objekten, die im Browser vordefiniert sind (DOM), können auch eigene Objekte erstellt werden.</p>
<p>Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt werden und wie man eigene Objekte erstellt.</p>
<h3 id=".C3.9Cbersicht_zu_Objekten">Übersicht zu Objekten</h3>
<p>Objekte in JavaScript können, wie auch bei anderen Programmiersprachen, mit Objekten in der realen Welt verglichen werden. Gegenstände aus der realen Welt können zur Veranschaulichung des Konzepts dienen.</p>
<p>Bei JavaScript ist ein Objekt eine eigenständige Einheit mit Eigenschaften und einem Typ. Ein Objekt könnte z. B. eine Tasse sein. Eine Tasse ist ein Objekt mit bestimmten Eigenschaften. Sie hat eine Farbe, ein Design, ein Gewicht, ist aus einem bestimmten Material gefertigt usw. Auf dieselbe Art und Weise besitzen JavaScript-Objekte Eigenschaften, womit deren Merkmale definiert werden.</p>
<h3 id="Objekte_und_Eigenschaften">Objekte und Eigenschaften</h3>
<p>Ein JavaScript-Objekt hat Eigenschaften, die mit dem Objekt verknüpft sind. Objekteigenschaften sind im Prinzip dasselbe, wie normale Variablen, außer dass sie zusätzlich einem Objekt zugeordnet sind. Der Zugriff auf eine Eigenschaft kann mit Hilfe der Punkt-Notation erfolgen:</p>
<pre class="brush: js">
objectName.propertyName
</pre>
<p>Wie auch bei normalen Variablen gilt es sowohl bei Objektnamen als auch bei deren Eigenschaften zwischen Groß- und Kleinschreibung zu unterscheiden. Eine Eigenschaft wird definiert, indem man dieser Eigenschaft einen Wert zuweist. Wir erstellen zum Beispiel ein Objekt mit dem Namen <code>myCar</code> and geben diesem Objekt drei verschiedene Eigenschaften <code>make</code>, <code>model</code> und <code>year</code>:</p>
<pre class="brush: js">
var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;
</pre>
<p>Eigenschaften von JavaScript-Objekten können auch mit Hilfe der Klammer-Notation definiert und angesprochen werden. Objekte werden manchmal <em>assoziative Arrays</em> genannt, da jede Eigenschaft mit einem String-Wert verknüpft ist, über den auf die Eigenschaft zugegriffen werden kann. Zum Beispiel können die Eigenschaften des Objekts <code>myCar</code> wie folgt definiert werden:</p>
<pre class="brush: js">
myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;
</pre>
<p>Der Name einer Objekteigenschaft kann jeder beliebige JavaScript-String und auch alles sein, was zu einem String konvertiert werden kann, einschließlich der leere String. Jedoch lassen sich Eigenschaftsnamen, die keine gültigen JavaScript-Bezeichner sind (z. B. Eigenschaftsnamen, die Leerzeichen oder Bindestriche enthalten oder mit einer Ziffer beginnen) nur über die Klammer-Notation ansprechen. Diese Notation ist außerdem sehr nützlich, wenn Eigenschaftsnamen dynamisch festgelegt werden, also wenn der Name der Eigenschaft erst während der Laufzeit festgelegt wird.</p>
<p>Ein paar Beispiele:</p>
<pre class="brush: js">
var myObj = new Object(),
    str = "myString",
    rand = Math.random(),
    obj = new Object();

myObj.type              = "Dot syntax";
myObj["date created"]   = "String with space";
myObj[str]              = "String value";
myObj[rand]             = "Random Number";
myObj[obj]              = "Object";
myObj[""]               = "Even an empty string";

console.log(myObj);
</pre>
<p>Der Eigenschaftsname kann auch in einer Variablen gespeichert und die Eigenschaft dann über diese Variable angesprochen werden:</p>
<pre class="brush: js">
var propertyName = "make";
myCar[propertyName] = "Ford";

propertyName = "model";
myCar[propertyName] = "Mustang";
</pre>
<p>Mit Hilfe der Klammer-Notation in Kombination mit <a class="internal" href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Statements#for...in_Statement" title="en-US/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> ist es möglich, über alle zählbaren Eigenschaften eines Objekts zu iterieren. Die folgende Funktion gibt alle Eigenschaften eines Objekts aus. Das Objekt und dessen Name werden als Argumente übergeben.</p>
<pre class="brush: js">
function showProps(obj, objName) {
  var result = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        result += objName + "." + i + " = " + obj[i] + "\n";
    }
  }
  return result;
}
</pre>
<p>Der Funktionsaufruf <code>showProps(myCar, "myCar")</code> würde folgendes zurückgeben:</p>
<pre>
myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969</pre>
<h3 id="Fast_alles_ist_ein_Objekt">Fast alles ist ein Objekt</h3>
<p>Bei JavaScript ist fast alles ein Objekt. Alle einfachen Typen, mit Ausnahme von <code>null</code> und <code>undefined</code>, werden wie Objekte behandelt. Sie können zugewiesene Eigenschaften sein (Eigenschaften mancher Typen sind nicht beständig) und haben alle Merkmale von Objekten.</p>
<h3 id="Durchlaufen_von_Objekteigenschaften">Durchlaufen von Objekteigenschaften</h3>
<p>Ab <a href="https://developer.mozilla.org/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> gibt es drei verschiedene Möglichkeiten, um Objekteigenschaften aufzulisten oder zu durchlaufen:</p>
<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a>-Schleifen<br />
    Diese Methode durchläuft alle aufzählbaren Eigenschaften eines Objekts und seines Prototyps.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys" title="en-US/docs/JavaScript/Reference/Global Objects/Object/keys">Object.keys(o)</a><br />
    Diese Methode gibt ein Array mit allen eigenen aufzählbaren Eigenschaftsnamen (Schlüssel) eines Objekts <code>o</code> zurück.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="en-US/docs/JavaScript/Reference/Global Objects/Object/getOwnPropertyNames">Object.getOwnPropertyNames(o)</a><br />
    Diese Methode gibt ein Array mit allen Eigenschaftsnamen (aufzählbar oder nicht) eines Objekts <code>o</code> zurück.</li>
</ul>
<p>Bei ECMAScript 5 gibt es keine vordefinierte Funktion, um alle Eigenschaften eines Objekts zu durchlaufen. Hier kann die folgende Funktion aushelfen:</p>
<pre class="brush: js">
function listAllProperties(o){     
	var objectToInspect;     
	var result = [];
	
	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){  
		result = result.concat(Object.getOwnPropertyNames(objectToInspect));  
	}
	
	return result; 
}
</pre>
<p>Das Durchlaufen der Eigenschaften kann nützlich sein, um "versteckte" Eigenschaften aufzudecken (Eigenschaften des Prototype, die nicht über das Objekt ansprechbar sind, weil eine andere frühere Eigenschaft des Prototype denselben Namen hat). Es können auch nur die ansprechbaren Eigenschaften aufgelistet werden, indem einfach doppelte Namen aus dem Array entfernt werden.</p>
<h3 id="Erstellung_von_neuen_Objekten">Erstellung von neuen Objekten</h3>
<p>Bei JavaScript sind eine Reihe von Objekten bereits vordefiniert. Zusätzlich können eigene Objekte erstellt werden. Bei JavaScript 1.2 und neuer können Objekte mit Hilfe eines Objekt-Literals erstellt werden. Alternativ kann auch zuerst eine Konstruktorfunktion erstellt werden und dann Instanzen von Objekten mit Hilfe dieser Funktion und dem <code>new</code>-Operator erstellt werden.</p>
<h3 id="Benutzung_von_Objekt-Literalen">Benutzung von Objekt-Literalen</h3>
<p>Auch mit Hilfe von Objekt-Literalen (auch Objekt-Initialisierer genannt) können Objekte erstellt werden. Die Benutzung von Objekt-Literalen wird als die "buchstäbliche" Notation zum Erstellen von Objekten bezeichnet. Die Bezeichnung <em>Objekt-Initialisierung</em> ist gleichbedeutend mit der Terminologie der Programmiersprache C++.</p>
<p>Syntax für ein Objekt, das über einen Objekt-Literal erstellt wird:</p>
<pre class="brush: js">
var obj = { property_1:   value_1,   // property_# may be an identifier...
            2:            value_2,   // or a number...
            // ...,
            "property n": value_n }; // or a string
</pre>
<p>wobei <code>obj</code> der Name des Objekts ist, jedes <code>property_i</code> eine Eigenschaft bzw. ein Bezeichner (Name, Zahl, oder String) und jedes <code>value_i</code> ein Ausdruck, dessen Wert der jeweiligen Eigenschaft zugewiesen ist. Das obj und die Zuweisung ist optional; wenn nicht an anderer Stelle auf das Objekt verwiesen werden soll, muss die Variable nicht erstellt werden. (Achtung: Wenn der Code an einer Stelle steht, wo eine Anweisung erwartet wird, muss sie er in Klammern eingeschlossen werden, damit keine Verwechslung mit einer Blockanweisung passiert).</p>
<p>Wenn ein Objekt mit Hilfe eines Objekt-Literals in einem Top-Level-Script erstellt wird, interpretiert JavaScript das Objekt jedesmal, wenn ein Ausdruck ausgewertet wird, der das Objekt-Literal enthält. Befindet sich der Code für das Objekt-Literal innerhalb einer Funktion, wird es bei jedem Funktionsaufruf erstellt.</p>
<p>Die folgende Anweisung erstellt ein Objekt und weist es der Variablen <code>x</code> zu, falls (und nur dann) die Bedungung <code>cond</code> zu <code>true</code> evaluiert.</p>
<pre class="brush: js">
if (cond) var x = {hi: "there"};
</pre>
<p>Das folgende Beispiel zeigt die Erstellung das Objekts <code>myHonda</code> mit drei Eigenschaften. Die Eigenschaft <code>engine</code> ist ebenfalls ein Objekt mit eigenen Eigenschaften.</p>
<pre class="brush: js">
var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};
</pre>
<p>Auch mit Objekt Literalen können Arrays erstellt werden, siehe <a href="/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale#Array-Literale">Array Literale</a>.</p>
<p>Bei JAvaScript 1.1 und früher können Objekt-Literale nicht eingesetzt werden. Objekte können nur mit Hilfe der Konstruktorfunktionen oder einer Funktion, die durch ein anderes Objekt bereitgestellt wird und diese Aufgabe erledigt, erstellt werden (Siehe nächster Abschnitt).</p>
<h3 id="Benutzung_einer_Konstruktor-Funktion">Benutzung einer Konstruktor-Funktion</h3>
<p>Alternativ kann ein Objekt über die beiden folgenden Schritte erstellt werden:</p>
<p>Definition des Objekttyps durch Schreiben einer Konstruktorfunktion. Es gibt eine Übereinkunft, dass man für diese Funktion einen großen Anfangsbuchstaben verwendet. Erstellen einer Instanz des Objekts mit Hilfe von <code>new</code>.</p>
<p>Zur Defintion des Objekttyps wird eine Funktion für diesen Typ erstellt, welche den Namen, die Eigenschaften und Methoden enthält. Angenommen es soll ein Objekttyp für Automobile erstellt werden. Das Objekt soll <code>car</code> heißen und die drei Eigenschaften <code>make</code>, <code>model</code> und <code>year</code> besitzen. Dann definiert man eine Funktion <code>Car</code>, welche die Werte für die Eigenschaften als Parameter entgegennimmt:</p>
<pre class="brush: js">
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
</pre>
<p>Bei dieser Funktion wird das Schlüsselwort <code>this</code> eingesetzt, um den Eigenschaften des Objekts die Werte der Argumente zuzuweisen.</p>
<p>Anschließend kann mit Hilfe dieser Funktion ein Objekt mycar erstellt werden:</p>
<pre class="brush: js">
var mycar = new Car("Eagle", "Talon TSi", 1993);
</pre>
<p>Mit dieser Zuweisung wird das Objekt <code>mycar</code> erstellt und die Argumentwerte werden den Eigenschaften zugewiesen. Die Eigenschaft <code>mycar.make</code> bekommt den Wert "Eagle", <code>mycar.year</code> den Wert 1993 usw.</p>
<p>Über den Aufruf von <code>new</code> können beliebig viele Objekte erstellt werden. Zum Beispiel:</p>
<pre class="brush: js">
var kenscar = new Car("Nissan", "300ZX", 1992);
var vpgscar = new Car("Mazda", "Miata", 1990);</pre>
<p>Ein Objekt kann eine Eigenschaft haben, die selbst wieder ein Objekt ist. Angenommen man erstellt ein Objekt <code>Person</code> wie folgt:</p>
<pre class="brush: js">
function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
</pre>
<p>Und erzeugen dann zwei Instanzen dieses Objekts:</p>
<pre class="brush: js">
var rand = new Person("Rand McKinnon", 33, "M");
var ken = new Person("Ken Jones", 39, "M");
</pre>
<p>Dann kann man die Funktion <code>Car</code> erweitern, damit das Objekt eine weitere Eigenschaft owner besitzt, der ein Person-Objekt zugewiesen werden kann<code>:</code></p>
<pre class="brush: js">
function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}
</pre>
<p>Nun können Instanzen des Objekts wie folgt erzeugt werden:</p>
<pre class="brush: js">
var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
var car2 = new Car("Nissan", "300ZX", 1992, ken);
</pre>
<p>Hierbei wern nun nicht nur String- und Integer-Werte, sondern auch jeweils ein Besitzer-Objekt (<code>rand</code> und <code>ken</code>) an die Funktion übergeben. Den Besitzer von <code>car1</code> kann man nun z. B. über folgende Eigenschaft herausfinden:</p>
<pre class="brush: js">
car2.owner.name
</pre>
<p>Eigenschaften können jederzeit zu einem bereits vordefinierten Objekt hinzugefügt werden. Diese Zuweisung:</p>
<pre class="brush: js">
car1.color = "black";
</pre>
<p>fügt dem Objekt car1 die Eigenschaft <code>color</code> mit dem Wert <code>"black"</code> hinzu. Dies betrifft allerdings keine der anderen Instanzen. Um allen Instanzen die neue Eigenschaft hinzuzufügen, muss die Definition des <code>car</code> Objekttyps erweitert werden.</p>
<h3 id="Benutzung_der_Methode_Objekt.create">Benutzung der Methode Objekt.create</h3>
<p>Objekte können auch mit Hilfe der Methode <code>Object.create</code> erstellt werden. Dieser Methode kann sehr nützlich sein, da sie erlaubt, das entsprechende Prototype-Objekt ohne die Definition einer Konstruktorfunktion auszuwählen. Weitere Informationen findet man in der <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create">Referenz</a>.</p>
<h3 id="Vererbung">Vererbung</h3>
<p>Alle Objekte bei JavaScript erben von wenigstens einem anderen Objekt. Das Objekt, von dem geerbt wird, nennt man Prototype. Die vererbten Eigenschaften können im Prototyp-Objekt des Konstruktors gefunden werden.</p>
<h3 id="Indexieren_von_Objekt-Eigenschaften">Indexieren von Objekt-Eigenschaften</h3>
<p>Bei JavaScript 1.0 kann über den Namen oder den Index auf die Eigenschaft eines Objekt zugegriffen werden. Bei JavaScript 1.1 und neuer muss der Zugriff auf eine Eigenschaft wieder über den Namen erfolgen, wenn sie über den Namen definiert wurde und über den Index, wenn sie über den Index definiert wurde.</p>
<p>Diese Beschränkung gilt sowohl für Objekte und ihre Eigenschaften, wenn sie über die Konstruktorfunktion erstellt wurden (wie im vorherigen Abschnitt beim car-Objekt) als auch wenn verschiedene Eigenschaften explizit definiert werden (zum Beispiel <code>myCar.color = "red"</code>). Wenn man anfänglich eine Objekt-Eigenschaft über ihren Index definiert, z. B. <code>myCar[5] = "25 mpg"</code>, so lässt sich diese Eigenschaft später nur über <code>myCar[5]</code> ansprechen.</p>
<p>Eine Ausnahme für diese Regel gibt es bei Objekten, die von HTML stammen, wie z. B. dem forms-Array. Auf diese Objekte kann entweder über ihre Nummer (basierend darauf, wo sie im Dokument vorkommen) oder ihren Namen (falls definiert) zugegriffen werden. Wenn im Dokument z. B. das zweite Formular-Tag <code>&lt;FORM&gt;</code> ein <code>NAME</code>-Attribute mit dem Wert <code>"myForm"</code> hat, kann dieses Formular über <code>document.forms[1], </code><code>document.forms["myForm"]</code> oder <code>document.myForm</code> angesprochen werden.</p>
<h3 id="Definition_von_Eigenschaften_f.C3.BCr_einen_Objekttyp">Definition von Eigenschaften für einen Objekttyp</h3>
<p>Einem zuvor definierten Objekt können mit Hilfe des Prototyp neue Eigenschaften zugeordnet werden. Auf diese Weise wird die Eigenschaften von allen Instanzen geteilt. Der folgende Code fügt allen Objekten vom Typ car eine Farbeigenschaft hinzu und weist der Eigenschaft von cor1 einen Wert zu.</p>
<pre class="brush: js">
Car.prototype.color = null;
car1.color = "black";
</pre>
<p>Im Abschnitt zu den <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">Eigenschaften</a> des <code>Function</code>-Objekts in der <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Referenz</a> findet man weiter Informationen.</p>
<h3>Defintion von Methoden</h3>
<p>Eine Methode ist eine Funktion die mit einem Objekt verknüpft ist. Anders ausgedrückt: Eine Methode ist eine Eigenschaft eines Objekts, die eine Funktion ist. Methoden werden genauso wie normale Funktionen definiert, außer dass sie einem Objekt zugeordnet werden müssen.</p>
<p>Beispiele:</p>
<pre class="brush: js">
objectName.methodname = function_name;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }
};
</pre>
<p>Bei diesem Beispiel ist objectName ein existierendes Objekt, methodname ist der Name der Methode und function_name, der Name einer Funktion die sich später über methodname wie folgt aufrufen lässt:</p>
<pre class="brush: js">
object.methodname(params);
</pre>
<p>Methoden können für einen Objekttyp definiert werden, indem sie innerhalb einer Konstruktorfunktion definiert werden. Zum Beispiel knnte man eine Funktion definieren, welche die Eigenschaften des zuvor definierten car-Objekts formatiert und auflistet:</p>
<pre class="brush: js">
function displayCar() {
  var result = "A Beautiful " + this.year + " " + this.make
    + " " + this.model;
  pretty_print(result);
}
</pre>
<p>wobei <code>pretty_print</code> eine Funktion ist, welche eine horizontale Linie und einen String ausgibt. Beachten Sie die Verwendung des Schlüsselworts <code>this</code>, womit auf das Objekt verwiesen wird.</p>
<p>Diese Funktion kann man zu einer Methode des Objekts car machen, indem man folgende Zuweisung der Objektdefinition hinzufügt.</p>
<pre class="brush: js">
this.displayCar = displayCar;
</pre>
<p>Die ganze Definition des Objekts car ist dann wie folgt:</p>
<pre class="brush: js">
function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayCar = displayCar;
}
</pre>
<p>Anschließend kann man die Methode <code>displayCar</code> wie folgt aufrufen:</p>
<div class="container">
  <div class="line number1 index0 alt2">
    <code class="js plain">car1.displayCar();</code></div>
  <div class="line number2 index1 alt1">
    <code class="js plain">car2.displayCar();</code></div>
  <div class="line number2 index1 alt1">
    &nbsp;</div>
  <div class="line number2 index1 alt1">
    Dies produziert eine Ausgabe wie im folgenden Bild:</div>
  <div class="line number2 index1 alt1">
    &nbsp;</div>
  <div class="line number2 index1 alt1">
    <p><img alt="Image:obja.gif" class="internal" src="https://developer.mozilla.org/@api/deki/files/786/=Obja.gif" /></p>
    <div>
      <p>Figure 7.1: Ausgabe der Methode.</p>
    </div>
  </div>
</div>
<h3>Benutzung von this zur Objektreferenzierung</h3>
<p>Javascript besitzt das spezielle Schlüsselwort this, das man innerhalb von Methoden benutzen kann, um auf das aktuelle Objekt zu verweisen. Wenn man zum Beispiel eine Funktion mit Namen <code>validate</code> hat, die einen Wert einer Objekteigenschaft validiert und der zwei Grenzwerte und als Parameter übergeben werden:</p>
<div>
  <div class="syntaxhighlighter  js" id="highlighter_587735">
    <table border="0" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td class="code">
            <div class="container">
              <div class="line number1 index0 alt2">
                <code class="js keyword">function</code> <code class="js plain">validate(obj, lowval, hival) {</code></div>
              <div class="line number2 index1 alt1">
                <code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">if</code> <code class="js plain">((obj.value &lt; lowval) || (obj.value &gt; hival))</code></div>
              <div class="line number3 index2 alt2">
                <code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(</code><code class="js string">"Invalid Value!"</code><code class="js plain">);</code></div>
              <div class="line number4 index3 alt1">
                <code class="js plain">}</code></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<p>Dann kann man die Funktion für jedes Formular-Element über den onchange-event-Handler aufrufen und mit Hilfe von <code>this</code> das Element übergeben:</p>
<div class="container">
  <div class="line number1 index0 alt2">
    <code class="html plain">&lt;</code><code class="html keyword">input</code> <code class="html color1">type</code><code class="html plain">=</code><code class="html string">"text"</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"age"</code> <code class="html color1">size</code><code class="html plain">=</code><code class="html string">"3"</code></div>
  <div class="line number2 index1 alt1">
    <code class="html spaces">&nbsp;&nbsp;</code><code class="html color1">onChange</code><code class="html plain">=</code><code class="html string">"validate(this, 18, 99)"</code><code class="html plain">&gt;</code></div>
</div>
<p>&nbsp;</p>
Zu dieser Version zurücksetzen