Mit Objekten arbeiten

  • Adressname der Version: JavaScript/javascript_guide/Mit_Objekten_arbeiten
  • Titel der Version: Mit Objekten arbeiten
  • ID der Version: 375327
  • 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 und 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 also 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, denn 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 bei der Programmiersprache C++.

Hier die 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. Die Variable 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 er in Klammern eingeschlossen werden, damit keine Verwechslung mit einer Blockanweisung stattfindet).

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 Bedingung 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 (mehr dazu im 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 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)">

Im Allgemeinen verweist this auf das aufrufende Objekt.

In Kombination mit der Eigenschaft form kann this auf das Elternobjekt eines Elements verweisen. Beim folgenden Beispiel enthält das Formular myForm ein Textobjekt und einen Button. Klickt der Benutzer den Button an, wird der Name des Formulars als Wert für des Textobjekt gesetzt. Beim onclick-Event-Handler des Buttons wird mit this.form auf das Elternobjekt myForm verwiesen.

Definition von gettern und settern

Ein getter ist eine Methode, die einen Wert einer spezifischen Eigenschaft bekommt. Ein setter ist eine Methode, die den Wert einer spezifischen Eigenschaft setzt. Man kann getter und setter für jedes vordefinierte Kernobjekt oder benutzerdefinierte Objekt verwenden, welches das Hinzufügen von neuen Eigenschaften erlaubt. Als Syntax für die Definition von gettern und settern kommt die literale Syntax zum Einsatz.

 

Hinweis: JavaScript 1.8.1

Ab JavaScript 1.8.1 werden setter nicht weiter aufgerufen, wenn Eigenschaften in Objekten und Array-Initialisierern gesetzt werden.

Die nachfolgende Sitzung mit JS-Shell veranschaulicht wie getter und setter für ein benutzerdefiniertes Objekt o funktionieren können. Die JS-Shell ist ein Programm das Entwicklern ermöglicht, Javascript-Code im Batch-Modus oder interaktiv zu testen. Bei Firefox kann man die Shell über die Tastenkombination Strg+Shift+K öffnen.

Die Eigenschaften des Objekts o sind:

  • o.a — Eine Zahl
  • o.b — Ein getter, der o.a plus 1 zurückgibt
  • o.c — Ein setter, der den Wert von o.a auf den halben Wert von o.c setzt.

Bitte beachten Sie, dass Funktionsnamen von gettern und settern, die in einem Objekt-Literal mit Hilfe von "[gs]et property()" (anstatt mit __define[GS]etter__ wie unten) definiert werden, nicht die Namen des getters selbst sind, auch wenn die [gs]et propertyName(){ }-Syntax dazu verleitet. Um eine Funktion in einem getter oder setter mit Hilfe der "[gs]et property()"-Syntax zu benennen, definiert man eine explizit benannte Funktion programmatisch mit Hilfe von Object.defineProperty (oder dem Object.prototype.__defineGetter__ Fallback).

Die folgende JS-Shell-Sitzung demonstriert, wie getter und setter den Datae-Prototype erweitern, um allen Instanzen des vordefinierten Date-Objekts eine weitere Eigenschaft Year hinzuzufügen. Die bereits existierenden Methoden getFullYear und setFullYear werden benutzt, um die Year-Eigenschaften getter und setter zu unterstützen.

Mit diesen Anweisungen wird ein getter und setter für die year-Eigenschaft definiert:

js> var d = Date.prototype;
js> d.__defineGetter__("year", function() { return this.getFullYear(); });
js> d.__defineSetter__("year", function(y) { this.setFullYear(y); });

Diese Anweisungen benutzen den getter und setter des Date-Objekts:

js> var now = new Date;
js> print(now.year);
2000
js> now.year = 2001;
987617605170
js> print(now);
Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001

Veraltete Syntax

Bei früheren Versionen unterstütze Javascript einige unterschiedliche Syntaxen für getter und setter, die nicht von anderen Engines unterstützt wurden. Bei neueren Versionen wird de Syntax nicht mehr unterstützt. Weitere Informationen darüber, was genau entfernt und geändert wurde, findet man in diesem Abschnitt.

Zusammenfassung

Im Prinzip können getter und setter wie folgt definiert werden:

  • über {{ web.link("#Using_object_initializers", "Objekt-Initializer") }}, oder
  • durch späteres hinzufügen zu beliebiger Zeit und einem beliebigen Objekt mit Hilfe von gettern oder settern.

Wenn getter und setter über Objekt-Initialisierer definiert werden, ist alles was man tun muss, der Methodennamen ein get oder set voranzustellen. Die getter-Methode darf dabei keinen Parameter entgegennehmen, während die setter-Methode exakt einen Paremeter hat - den neuen Wert, der gesetzt werden soll.

Zum Beispiel:

var o = {
  a: 7,
  get b() { return this.a + 1; },
  set c(x) { this.a = x / 2; }
};

Getter und setter können auch jederzeit mit Hilfe der zwei speziellen Methoden __defineGetter__ und __defineSetter__ hinzugefügt werden. Beide Methoden erwarten den Namen des getter oder setter als ersten Parameter in Form eines Strings. Der zweite Parameter ist die Funktion, die als getter oder setter aufgerufen werden soll. Dazu folgendes Beispiel (anknüpfend an das letzte Beispiel):

o.__defineGetter__("b", function() { return this.a + 1; });
o.__defineSetter__("c", function(x) { this.a = x / 2; });

Für welche der beiden Möglichkeiten man sich entschedet, hängt vom Programmierstil und der zu bewältigenden Aufgabe ab. Wenn man sowieso einen Objekt-Initializer benutzt, um einen Prototype zu definieren, wird man sich eher für die erstgenannte Form entscheiden. Diese ist auch kompakter und einfacher nachvollziehbar. Sofern man getter und setterzu einem späteren Zeitpunkt definiert, etwa weil man den Prototype oder das entsprechende Objekt nicht selbst definiert hat, bleibt nichts anderes übrig, nur die zweite Form zu benutzen.  Die zweite Form zeigt wunderbar die Dynamik von JavaScript - kann aber dazu führen, dass der Code schwer lesbar und verständlich ist.

Bei Firefox vor Version 3.0, werden getter und setter nicht für DOM-Elemente unterstützt. Bei ältere Versionen von Firefox sceitert die Ausführung und sie liefern keine Fehlermeldung. Wenn Exceptions für diese Browser benötigt werden, kann man als Workaround den Prototypevon HTMLElement (HTMLElement.prototype.__define[SG]etter__) verändern und eine Ausnahme auslösen.

Mit Firefox 3.0, löst das Definieren eines getters oder setters für eine bereits definierte Eigenschaft eine Ausnahme aus. Die Eigenschaft muss vorher gelöscht werden, was bei älteren Versionen nicht der Fall ist.

Weitere Informationen

Löschen von Eigenschaften

Mit Hilfe des delete-Operators können Eigenschaften gelöscht werden:

//Neues Objekt "myobj" mit zwei Eigenschaften, "a" und "b".
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

//Löschen der Eigenschaft "a". Das Objekt mit der Eigenschaft "b" bleibt bestehen.
delete myobj.a;

Mit delete kann man auch globale Variablen löschen, wenn das Schlüsselwort var bei der Deklaration nicht verwendet wurde:

g = 17;
delete g;

Siehe {{ web.link("Expressions_and_operators#delete", "delete") }} für mehr Informationen.

Siehe auch

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 und 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 also 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, denn 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 bei der Programmiersprache C++.</p>
<p>Hier die 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. Die Variable <code>obj</code> 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 er in Klammern eingeschlossen werden, damit keine Verwechslung mit einer Blockanweisung stattfindet).</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 Bedingung <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 (mehr dazu im 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 id="Defintion_von_Methoden">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 id="Benutzung_von_this_zur_Objektreferenzierung">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 als Parameter übergeben werden:</p>
<div>
  <div class="container">
    <pre class="line number4 index3 alt1">
<code class="brush: js">function</code> <code class="js plain">validate(obj, lowval, hival) {</code>
<code class="js spaces">  </code><code class="js keyword">if</code> <code class="js plain">((obj.value &lt; lowval) || (obj.value &gt; hival))</code>
<code class="js spaces">    </code><code class="js plain">alert(</code><code class="js string">"Invalid Value!"</code><code class="js plain">);</code>
<code class="js plain">}</code></pre>
  </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>
<pre class="brush: html">
&lt;input type="text" name="age" size="3" onChange="validate(this, 18, 99)"&gt;</pre>
<p>Im Allgemeinen verweist <code>this</code> auf das aufrufende Objekt.</p>
<p>In Kombination mit der Eigenschaft <code>form</code> kann <code>this</code> auf das Elternobjekt eines Elements verweisen. Beim folgenden Beispiel enthält das Formular <code>myForm</code> ein Textobjekt und einen Button. Klickt der Benutzer den Button an, wird der Name des Formulars als Wert für des Textobjekt gesetzt. Beim onclick-Event-Handler des Buttons wird mit <code>this.form</code> auf das Elternobjekt <code>myForm</code> verwiesen.</p>
<h3 id="Definition_von_gettern_und_settern">Definition von gettern und settern</h3>
<p>Ein <code>getter</code> ist eine Methode, die einen Wert einer spezifischen Eigenschaft bekommt. Ein <code>setter</code> ist eine Methode, die den Wert einer spezifischen Eigenschaft setzt. Man kann getter und setter für jedes vordefinierte Kernobjekt oder benutzerdefinierte Objekt verwenden, welches das Hinzufügen von neuen Eigenschaften erlaubt. Als Syntax für die Definition von gettern und settern kommt die literale Syntax zum Einsatz.</p>
<p>&nbsp;</p>
<div class="blockIndicator standardNote standardNoteBlock">
  <p><span class="external">Hinweis: </span><a class="external" href="http://developer.mozilla.org/en-US/docs/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></p>
  <p style="font-weight: 400;">Ab JavaScript 1.8.1 werden setter nicht weiter aufgerufen, wenn Eigenschaften in Objekten und Array-Initialisierern gesetzt werden.</p>
</div>
<p>Die nachfolgende Sitzung mit <a href="https://developer.mozilla.org/en-US/docs/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="en-US/docs/SpiderMonkey/Introduction to the JavaScript shell">JS-Shell</a> veranschaulicht wie getter und setter für ein benutzerdefiniertes Objekt <code>o</code> funktionieren können. Die JS-Shell ist ein Programm das Entwicklern ermöglicht, Javascript-Code im Batch-Modus oder interaktiv zu testen. Bei Firefox kann man die Shell über die Tastenkombination Strg+Shift+K öffnen.</p>
<p>Die Eigenschaften des Objekts o sind:</p>
<ul>
  <li><code>o.a</code> — Eine Zahl</li>
  <li><code>o.b</code> — Ein getter, der <code>o.a</code> plus 1 zurückgibt</li>
  <li><code>o.c</code> — Ein setter, der den Wert von o.a auf den halben Wert von o.c setzt.</li>
</ul>
<p>Bitte beachten Sie, dass Funktionsnamen von gettern und settern, die in einem Objekt-Literal mit Hilfe von "[gs]et <em>property</em>()" (anstatt mit <code>__define[GS]etter__</code> wie unten) definiert werden, nicht die Namen des getters selbst sind, auch wenn die <code>[gs]et <em>propertyName</em>(){ }</code>-Syntax dazu verleitet. Um eine Funktion in einem getter oder setter mit Hilfe der "[gs]et <em>property</em>()"-Syntax zu benennen, definiert man eine explizit benannte Funktion programmatisch mit Hilfe von&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
Objects/Object/defineProperty">Object.defineProperty</a></code> (oder dem <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code> Fallback).</p>
<p>Die folgende JS-Shell-Sitzung demonstriert, wie getter und setter den Datae-Prototype erweitern, um allen Instanzen des vordefinierten Date-Objekts eine weitere Eigenschaft Year hinzuzufügen. Die bereits existierenden Methoden <code>getFullYear</code> und <code>setFullYear</code> werden benutzt, um die Year-Eigenschaften getter und setter zu unterstützen.</p>
<p>Mit diesen Anweisungen wird ein getter und setter für die year-Eigenschaft definiert:</p>
<pre class="brush: js">
js&gt; var d = Date.prototype;
js&gt; d.__defineGetter__("year", function() { return this.getFullYear(); });
js&gt; d.__defineSetter__("year", function(y) { this.setFullYear(y); });
</pre>
<p>Diese Anweisungen benutzen den getter und setter des Date-Objekts:</p>
<pre class="brush: js">
js&gt; var now = new Date;
js&gt; print(now.year);
2000
js&gt; now.year = 2001;
987617605170
js&gt; print(now);
Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
</pre>
<h4 id="Obsolete_syntaxes">Veraltete Syntax</h4>
<p>Bei früheren Versionen unterstütze Javascript einige unterschiedliche Syntaxen für getter und setter, die nicht von anderen Engines unterstützt wurden. Bei neueren Versionen wird de Syntax nicht mehr unterstützt. Weitere Informationen darüber, was genau entfernt und geändert wurde, findet man in <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/" title="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">diesem Abschnitt.</a></p>
<h4 id="Summary">Zusammenfassung</h4>
<p>Im Prinzip können getter und setter wie folgt definiert werden:</p>
<ul>
  <li>über {{ web.link("#Using_object_initializers", "Objekt-Initializer") }}, oder</li>
  <li>durch späteres hinzufügen zu beliebiger Zeit und einem beliebigen Objekt mit Hilfe von gettern oder settern.</li>
</ul>
<p>Wenn getter und setter über Objekt-Initialisierer definiert werden, ist alles was man tun muss, der Methodennamen ein get oder set voranzustellen. Die getter-Methode darf dabei keinen Parameter entgegennehmen, während die setter-Methode exakt einen Paremeter hat - den neuen Wert, der gesetzt werden soll.</p>
<p>Zum Beispiel:</p>
<pre class="brush: js">
var o = {
  a: 7,
  <strong>get</strong> b() { return this.a + 1; },
  <strong>set</strong> c(x) { this.a = x / 2; }
};
</pre>
<p>Getter und setter können auch jederzeit mit Hilfe der zwei speziellen Methoden <code>__defineGetter__</code> und <code>__defineSetter__</code> hinzugefügt werden. Beide Methoden erwarten den Namen des getter oder setter als ersten Parameter in Form eines Strings. Der zweite Parameter ist die Funktion, die als getter oder setter aufgerufen werden soll. Dazu folgendes Beispiel (anknüpfend an das letzte Beispiel):</p>
<pre class="brush: js">
o.__defineGetter__("b", function() { return this.a + 1; });
o.__defineSetter__("c", function(x) { this.a = x / 2; });
</pre>
<p>Für welche der beiden Möglichkeiten man sich entschedet, hängt vom Programmierstil und der zu bewältigenden Aufgabe ab. Wenn man sowieso einen Objekt-Initializer benutzt, um einen Prototype zu definieren, wird man sich eher für die erstgenannte Form entscheiden. Diese ist auch kompakter und einfacher nachvollziehbar. Sofern man getter und setterzu einem späteren Zeitpunkt definiert, etwa weil man den Prototype oder das entsprechende Objekt nicht selbst definiert hat, bleibt nichts anderes übrig, nur die zweite Form zu benutzen.&nbsp; Die zweite Form zeigt wunderbar die Dynamik von JavaScript - kann aber dazu führen, dass der Code schwer lesbar und verständlich ist.</p>
<div class="tip">
  <p>Bei Firefox vor Version 3.0, werden getter und setter nicht für DOM-Elemente unterstützt. Bei ältere Versionen von Firefox sceitert die Ausführung und sie liefern keine Fehlermeldung. Wenn Exceptions für diese Browser benötigt werden, kann man als Workaround den Prototypevon HTMLElement<code> (HTMLElement.prototype.__define[SG]etter__)</code> verändern und eine Ausnahme auslösen.</p>
  Mit Firefox 3.0, löst das Definieren eines getters oder setters für eine bereits definierte Eigenschaft eine Ausnahme aus. Die Eigenschaft muss vorher gelöscht werden, was bei älteren Versionen nicht der Fall ist.</div>
<h4 id="Defining_getters_and_setters_See_also" name="Defining_getters_and_setters_See_also">Weitere Informationen</h4>
<ul>
  <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter">__defineGetter__</a></code></li>
  <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineSetter" title="en-US/docs/JavaScript/Reference/Global_Objects/Object/defineSetter">__defineSetter__</a></code></li>
  <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/get" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code></li>
  <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/set" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code></li>
</ul>
<h3 id="Deleting_properties">Löschen von Eigenschaften</h3>
<p>Mit Hilfe des <code>delete</code>-Operators können Eigenschaften gelöscht werden:</p>
<pre class="brush: js">
//Neues Objekt "myobj" mit zwei Eigenschaften, "a" und "b".
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

//Löschen der Eigenschaft "a". Das Objekt mit der Eigenschaft "b" bleibt bestehen.
delete myobj.a;
</pre>
<p>Mit <code>delete</code> kann man auch globale Variablen löschen, wenn das Schlüsselwort var bei der Deklaration nicht verwendet wurde:</p>
<pre class="brush: js">
g = 17;
delete g;
</pre>
<p>Siehe <code>{{ web.link("Expressions_and_operators#delete", "delete") }}</code> für mehr Informationen.</p>
<h2 id="See_also">Siehe auch</h2>
<ul>
  <li><a class="external" href="http://es5.github.com/#x4.2" title="http://es5.github.com/#x4.2">ECMAScript 5.1 spec: Language Overview</a></li>
  <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/javascript-the-core" title="http://dmitrysoshnikov.com/ecmascript/javascript-the-core">JavaScript. The core. (Dmitry A. Soshnikov ECMA-262 article series)</a></li>
</ul>
Zu dieser Version zurücksetzen