Geschrieben von

JavaScript: Objekte

Schublade

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

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.

Bei Objekten handelt es sich um einen Behälter, der mehrere Eigenschaften und Methoden beinhalten kann. Eigenschaften werden auch Attribute oder Properties genannt. Bei einem Auto wären das die Farbe, PS-Anzahl, etc. Methoden werden auch als Funktionen genannt. Bei einem Auto wäre das Starten, Bremsen, Schalten, etc.

Objekt-Arten

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.

Eigenschaften und Methoden

  • 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.

Syntax: Objekte erzeugen

Objekte kann man mit „new Object();“ oder durch die Literalschreibweise 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]);

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.

Last modified: 15. November 2019