Einfache Objekte – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Einfache Objekte

In JavaScript stellen Plain Ob­jects, ein­fache Ob­jek­te, die Grund­la­ge al­ler Ob­jek­te dar und er­mög­li­chen ei­ne ein­fa­che Form, Da­ten zwi­schen­zu­speichern.

Das Erstellen eines einfachen Objekts ist ähnlich zur Erstellung eines Arrays. Es werden ebenfalls Klammern geschrieben, zwischen denen der Inhalt definiert wird. Im Gegensatz zum Array sind es beim Plain Object jedoch keine eckigen, sondern geschweifte Klammern.

var obj = {};

obj; // Auslesen
// => Object {}

Je nachdem, welcher Browser verwendet wird, kann die Darstellung in der Konsole unterschiedlich aussehen. In Chrome wird beim Auslesen der obj-Variable Object am Anfang der Ausgabe angezeigt, um zu signalisieren, dass es sich hierbei um ein einfaches Objekt handelt.

Properties können dem Objekt sowohl über die Punkt- als auch Klammer-Notation hinzugefügt und ausgelesen werden.

obj.myProperty = "my value";

obj["myProperty"];
// => "my value"

obj;
// => Object { myProperty: "my value" }

Wie beim Array kann der Inhalt des Objekts bzw. dessen Properties schon bei der Initialisierung übergeben werden, indem er zwischen die geschweiften Klammern geschrieben wird.

obj = { myProperty: "my value" };

obj;
// => Object { myProperty: "my value" }

Diese Schreibweise wird auch als literale Notation bezeichnet und die Initialisierungs-Anweisung als Objektliteral, im Englischen object literal.

Mehrere Werte können durch Kommas getrennt beim Initialisieren gesetzt werden.

var actress = { name: "Jodie Foster", gender: "female", birthday: "19.11.1962" };

// actress umfasst nun all die Properties
actress.name
// => "Jodie Foster"

actress.gender
// => "female"

Zur besseren Lesbarkeit werden die Properties in Objektliteralen oftmals nicht nebeneinander geschrieben, sondern untereinander. Wenn das Objekt sehr viele Properties umfasst, wird auf diese Weise eine zu lange Zeile vermieden.

var actress = {
  name: "Jodie Foster",
  gender: "female",
  birthday: "19.11.1962"
};

Der implizite new Operator

Das Geburtsdatum als String zu schreiben, ist keine gute Idee. Durch den String ist das Datum bereits in einem festen Format – Datumsformate unterscheiden sich jedoch international. Gibt es nicht eine bessere Möglichkeit, ein Datum zu definieren?

Für Daten gibt es in JavaScript das Date-Objekt. Jodie Fosters Geburtstag wird dadurch so geschrieben:

actress.birthday = new Date(1962, 10, 19);

Was bedeutet das new, das vor dem Funktionsaufruf steht?

Objekte, egal welcher Art, müssen von irgendwo herkommen. Irgendwo muss festgelegt sein, was ein Objekt ist, was es macht und welche Eigenschaften es hat.
Und das ist festgelegt. Es gibt eine Vorlage für jede Art von Objekt. Beim Erstellen eines Objekts wird es als ein Exemplar aus dessen Vorlage erzeugt. Um das zu tun, um ein Exemplar aus einer Vorlage zu erzeugen, wird der new-Operator vor den Aufruf der Konstruktor-Funktion geschrieben.
Die Konstruktor-Funktion konstruiert das Objekt. Sie kann innere Zustände festlegen und Eigenschaften und Methoden definieren.
Das Exemplar, das erzeugt wird, ist die Instanz, weswegen der Prozess Instanziieren gennant wird.

var date = new Date(1962, 10, 19);

Konstruktor-Funktionen werden per Konvention mit einem großen ersten Buchstaben geschrieben, wohingegen der Name einer Instanz klein geschrieben wird (bzw. in camel case).

Das Instanziieren aus einer Konstruktor-Funktion gilt für alle Objekte, einschließlich Arrays und Objekte. Die bisherige Schreibweise mit eckigen und geschweiften Klammern ist nur eine Abkürzung.

new Array(); // Das gleiche wie []

new Object(); // Das gleiche wie {}

Da diese Schreibweise sehr viel länger ist, werden Arrays und Objekte zum überwiegenden Teil per Klammer-Notation initialisiert.