JavaScript ist – unter anderem – eine objektorientierte Programmiersprache. Objekte sind ein zentraler Bestandteil von JavaScript. Dieser Beitrag soll einen kleinen Einstieg bieten.

• Was sind Objekte in JavaScript?
• Objekt-Arten und Unterobjekte
• Syntax: Objekte erzeugen
• Werte abrufen
• Eigenschaften und Methoden
• Konstruktoren, Prototypen und Instanzen
• with und this
• Objekte vs. Arrays

Was sind Objekte in JavaScript?

Möchten wir mehrere Werte unter einem gemeinsamen Namen speichern, kommen Arrays zum Einsatz. Beispiel:

let auto = ["Kombi", "silber", "leder"];

Das erste Element wäre der Autotyp, das Zweite die Farbe und das Dritte die Innenausstattung. Bei komplexen Programmen kann das problematisch werden, wenn wir weitere Werte hinzufügen möchten. Zum Beispiel möchten wir später noch die Kilometerzahl an der 2. Stelle im Array dazu nehmen. Dann wird unser Code schnell unübersichtlich. Hier kommen Objekte ins Spiel.

Objekte sind ein Typ von Daten (siehe auch Datentypen in JavaScript). Sie bündeln Informationen als Zuordnungsliste. Man kann sich das als einen Behälter vorstellen, der unter bestimmten Namen bestimmte Werte speichert. Dabei spricht man auch von Name-Werte-Paaren (Key-Value-Pairs). Diese Paare stellen die Eigenschaften dar.

Würde man ein Objekt “Auto” als Tabelle darstellen wollen, dann hätte man folgendes Bild:

Als Eigenschaft kann aber auch ein Objekt definiert werden, wodurch eine Verschachtelung entstehen kann.

Objekt-Arten und Unterobjekte

In JavaScript gibt es 3 Arten von Objekten:

• JavaScript-Objekte: Von JavaScript werden viele Objekte schon standardmäßig zur Verfügung gestellt. Dazu zählen “document”, “window” oder “Array”.
• HTML-Objekte: Das oberste JavaScript-Objekt ist “window”, darunter liegt wiederum das JavaScript-Objekt “document”. Alles was dann darunter liegt, sind HTML-Objekte. Dies können Formulare, Listen, Grafiken, etc. sein. Über die Schreibweise “document.formular.button.value” können die Inhalte und Daten angesteuert werden. Schaue dazu auch in meinem Artikel “Zugriff auf das DOM” rein.
• Selbst definierte Objekte: JavaScript bietet darüber hinaus die Möglichkeit eigene Objekte zu definieren.

Ganz gleich um welche Objekt-Art es sich handelt, alle besitzen Eigenschaften und Methoden. Weiter gibt es beim Datentyp Object noch viele Unterobjekte. Mehr dazu findest du in der Einführung zu den Datentypen in JavaScript. Die wichtigsten sind:

• Funktionen
• Arrays
• Reguläre Ausdrücke
• Date, Math, etc. gehören ebenfalls zu den Unterobjekten.

Syntax: Objekte erzeugen

Objekte kann man mit “new Object();” oder durch die Literalschreibweise (Object-Literal) erzeugen.

new Object();
Bei dieser Schreibweise sieht die Syntax wie folgt aus:

var auto = new Object();

auto.typ = "Kombi";
auto.bremsen();


Zunächst wird mit newObject(); ein neues Objekt deklariert. Das Objekt wird sofort in einer Variable gespeichert. Im Anschluss wird eine Eigenschaft (oder auch Property bzw. Attribut) erzeugt (typ). Zudem wird eine Methode (auch Funktion genannt) erzeugt (bremsen();).

Literalschreibweise
Die eben dargestellte Schreibweise kann auch abgekürzt werden:

var auto = new Object();

auto = {
typ: "Kombi",
bremsen: function() {
console.log(logik);
}
}


Noch kürzer geht es mit folgender Schreibweise:

var auto = {
typ: "Kombi",
bremsen: function() {
console.log(logik);
}
}


Bei der Deklaration von Objekten gelten zudem folgende Aspekte:

• Die zugewiesene Eigenschaft kann ein beliebiger Datentyp sein.
• Eine zugewiesene Eigenschaft kann selbst ein Objekt darstellen.

Werte abrufen

Es gibt 2 Möglichkeiten Werte aus einem Objekt abzurufen:

Möglichkeit 1
console.log(auto.typ);

Möglichkeit 2
console.log(auto["typ"]);

Möglichkeit 1 ist die Punktschreibweise, Möglichkeit 2 die Schreibweise mit eckigen Klammern. Beide funktionieren gleichermaßen, jedoch mit einem Unterschied: Wenn der Name der Eigenschaft, auf die wir zugreifen möchten in einer Variable steckt, dann ist der Zugriff nur mit Möglichkeit 2 möglich. Mit der Punktschreibweise würde das nicht gehen. Ein Beispiel:

var auto = {
typ: "Kombi",
bremsen: function() {
console.log(logik);
}
}

var t = "typ";

console.log(auto[t]);


Eigenschaften und Methoden

Vereinfacht ausgedrückt kann man hier sagen:

• Eigenschaften werden auch Attribute oder Properties genannt. Außerhalb von Objekten spricht man dabei von Variablen, innerhalb von Objekten werden diese Variablen “Eigenschaften” genannt.
• Methoden sind Funktionen. Außerhalb von Objekten spricht man von Funktionen, innerhalb von Objekten heißen diese Methoden.

Weiter vorne hatte ich “Die zugewiesene Eigenschaft kann ein beliebiger Datentyp sein.” bei der Erzeugung von Objekten geschrieben. Das heißt, dass man auch eine Funktion speichern kann. Diese Eigenschaft nennt man dann Methoden. Beispiel:

var auto = {
typ: "Kombi",
bremsen: function() {
console.log(logik);
}
}


Zuerst wird hier der Eigenschaftsname notiert, gefolgt von einem Doppelpunkt und dann wird wie gewohnt die Funktion geschrieben. Seit ECMAScript 6 (2015) geht das aber noch kürzer:

var auto = {
typ: "Kombi",
bremsen() {
console.log(logik);
}
}


Das Schlüsselwort “function” und der Doppelpunkt können weggelassen werden. Möchte man nun innerhalb der Methode auf das Objekt zugreifen, so kann man das mit “this” machen (mehr dazu unten).

Konstruktoren, Prototypen und Instanzen

Ein paar weitere wichtige Begriffe im Zusammenhang mit Objekten.

Zunächst einmal gibt es den Konstruktor. In JavaScript ist es so, dass auch das Objekt zunächst erstellt werden muss. Das geschieht mittels einer Funktion JS-intern. Diese Funktion wird als Konstruktor genannt. Man kann aber auch eigene Konstruktoren erstellen, indem man eine Funktion dafür definiert.

Hat der Konstruktor nun ein Objekt erstellt, dann werden diese als Instanzen des Konstruktors genannt.

Der Konstruktor erstellt diese Instanzen meist nach dem gleichen Muster. Das Muster ist wiederum selbst ein Objekt und wird als Prototyp bezeichnet. Eine Instanz ist also eigentlich nur eine Kopie des Prototypen.

Für die Praxis heißt das:

• Jedes erstellte Objekt besitzt die Eigenschaft constructor. Mit auto.constructor kann man auf den Konstruktor, der das Objekt erstellt hat, zugreifen.
• Mit der Eigenschaft prototype kann man auf der Prototypen zugreifen. Mit auto.prototype kann man sich das Objekt ausgeben.

with und this

Die Schlüsselwörter with und this kommen bei der Arbeit mit Objekten immer wieder vor.

Mit with kann man mehrere Anweisungen notieren, die dem gleichen Objekt angehören. Diese Kurzschreibweise sieht wie folgt aus:

with (auto) {
fahren("Hier kommt die Logik");
schalten("Hier kommt die Logik");
beschleunigen("Hier kommt die Logik");
}


Mit dem Schlüsselwort with wird die Deklaration eingeleitet. In runden Klammern folgt der Objektname, in geschweiften Klammern die Anweisungen. Die Deklaration würde auch folgendermaßen funktionieren:

auto.fahren("Hier kommt die Logik");
auto.schalten("Hier kommt die Logik");
auto.beschleunigen("Hier kommt die Logik");


Mit with spart man sich genau diese Schreibweise. Man muss nicht immer beginnend mit “auto.” die Funktionen deklarieren, sondern kann die obige Kurzvariante verwenden.

Bei this handelt es sich um einen Verweis auf ein Objekt. Worauf es genau zeigt, hängt von Kontext ab. Es folgen ein paar Beispiele.

Hier verweist this auf das übergeordnete Objekt, also window. Den gleichen Output hätten wir bei console.log(window);.
console.log(this);

Das gilt auch, wenn wir this in einer Funktion verwenden. Auch hier könnte man this durch window ersetzen.
function showThis () {
console.log(this);
}

showThis();

Heißt konkret: this zeigt standardmäßig auf window (globales Objekt). Innerhalb eines Objekts zeigt this jedoch auf object. Hier ein Beispiel:

var auto = {
typ: "Kombi",
bremsen: function() {
console.log("Der " + this.typ + " bremst.");
}
}
auto.bremsen();


Mit this.typ greifen wir auf die Eigenschaft “typ” innerhalb des Objekts zu. Man könnte eigentlich auch “auto.typ” schreiben, man bekäme den gleichen Output. Der Vorteil von this ist, dass es unabhängig vom Modulnamen ist. Sollte sich der Modulname – in unserem Fall auto – ändern, müsste man die Verweise nicht anpassen.

Objekte vs. Arrays

Bei Arrays handelt es sich um eine Art von Objekten. Gehen wir vom folgenden Beispiel aus:

var auto = {typ: 1, farbe: 2, ps: 3};
var auto = [1, 2, 3];


In der ersten Zeile haben wir ein Objekt, in der Zweiten ein Array. Abgesehen davon, dass Objekte in geschweiften Klammern geschrieben werden und Arrays in eckigen Klammern, können wir folgendes feststellen:

• Beim Objekt haben wir Key-Value-Paare, während das Array nur Werte besitzt.
• Das Array besitzt noch die Eigenschaft length, mit der man auf die Werte zugreifen kann. Beim Objekt erfolgt der Zugriff auf die Werte über die Variablennamen.

Arrays sollte man verwenden, wenn man auf Werte in einer bestimmten Reihenfolge zugreifen möchte. Wenn man Daten vom gleichen Typ und große Datenmengen hat, sollte man ebenfalls Arrays einsetzen. Wenn man aber verschiedene Datentypen speichert und auf diese über die Variablennamen zugreifen möchte, sollte man auf Objekte setzen.