7.4.2 Objekte mit object literals erstellen

Ein Objekt ist in JavaScript eine Sammlung von Daten und Funktionen. Innerhalb eines Objekts werden diese Eigenschaften (engl. Properties) und Methoden (engl. Methods) genannt. Ein Objekt lässt sich mit nur einer Zeile erzeugen:

const student = {};

Allerdings ist dies ein leeres Objekt ohne Eigenschaften und Methoden. Fügen wir zunächst ein paar Eigenschaften hinzu.

Beispiel

const student = {
  name:           'Lena',
  matrikelnummer: '720234',
  studiengang:    'Medientechnik',
  vorlesungen:    ['Mediendesign', 'Computergrafik', 'Nachrichtentechnik'],

  info: function() {
    alert(this.name + ' (Matrikelnummer: ' + this.matrikelnummer + ') studiert ' 
    + this.studiengang + ' und besucht folgende Vorlesungen: ' 
    + this.vorlesungen.join(', ') + '.');
  }
};

Dieses Objekt besitzt nun vier Eigenschaften (name, matrikelnummer, studiengang, vorlesungen) und eine Methode (info()). Die Methode verwendet das Schlüsselwort this, um auf die Eigenschaften des Objekts (also genau dieses eigene Objekts) zuzugreifen.

Nach der Deklaration des Objekts kann auf die Eigenschaften und Methoden mit der sehr praktischen Punktnotation (Dot-Notation) zugegriffen werden.

1
2
3
4
5
6
7
student.name;            // 'Lena'
student.matrikelnummer;  // '720234'
student.studiengang;     // 'Medientechnik'
student.vorlesungen[1];  // 'Computergrafik'
student.info();          // Öffnet Dialog mit Inhalt: 'Lena (Matrikelnummer: 720234) 
                         // studiert Medientechnik und besucht folgende Vorlesungen:
                         // Mediendesign, Computergrafik, Nachrichtentechnik.'

Diese Art von JavaScript-Objekten werden als object literals bezeichnet, da das komplette Objekt buchstäblich (engl. literal) im Code steht, wo es erzeugt wird. Das ist ein Unterschied zu Objekten, die aus Klassen erzeugt werden, dazu später mehr.


Zugriffsmöglichkeiten: Punkt- und Klammernotation

Um auf die Eigenschaften und Methoden von Objekten zuzugreifen, gibt es in JavaScript zwei Möglichkeiten: die Punktnotation und die Klammernotation (Bracket-Notation).

Punktnotation

Die Punktnotation wird häufig verwendet, da sie kürzer und leichter lesbar ist.

1
2
3
4
5
6
7
// Werte lesen
student.name;                // 'Lena'
student.vorlesungen[2];      // 'Nachrichtentechnik'

// Werte zuweisen
student.matrikelnummer = '654321';          // Matrikelnummer geändert
student.vorlesungen[2] = 'Bildbearbeitung'; // Vorlesung aktualisiert

Klammernotation

Die Klammernotation wird verwendet, wenn der Name der Eigenschaft als String bekannt ist oder dynamisch berechnet wird.

1
2
3
4
5
6
7
// Werte lesen
student['name'];                // 'Lena'
student['vorlesungen'][2];      // 'Nachrichtentechnik'

// Werte zuweisen
student['matrikelnummer'] = '654321';          // Matrikelnummer geändert
student['vorlesungen'][2] = 'Bildbearbeitung'; // Vorlesung aktualisiert

Beide Notationen können beliebig eingesetzt werden. Die Punktnotation eignet sich für feste Eigenschaftsnamen, während die Klammernotation bei dynamischen Namen oder Sonderzeichen in Eigenschaftsnamen verwendet werden sollte.


Verschachtelte Objekte

Objekte können beliebig ineinander verschachtelt werden, sodass komplexe Strukturen abgebildet werden können. Der Zugriff erfolgt analog zu den oben gezeigten Notationen.

Beispiel

const hochschule = {
  fachbereich: {
    technik: {
      sprecher: {
        name: 'Prof. Dr. Müller',
        alter: 50,
      }
    },
    medientechnik: {
      sprecher: {
        name: 'Prof. Dr. Lemke',
        alter: 42,
      }
    }
  },
  studierende: {
    lena: {
      matrikelnummer: '720234',
      studiengang: 'Medientechnik'
    }
  }
};

// Zugriff mit Punktnotation
hochschule.fachbereich.medientechnik.sprecher.name;        // 'Prof. Dr. Lemke'
hochschule.studierende.lena.studiengang;                   // 'Medientechnik'

// Zugriff mit Klammernotation
hochschule['fachbereich']['technik']['sprecher']['alter']; // 50
hochschule['studierende']['lena']['matrikelnummer'];       // '720234'

Eigenschaften und Methoden hinzufügen

JavaScript-Objekte erlauben es, nachträglich neue Eigenschaften und Methoden hinzuzufügen.

Beispiel

const hochschule = {
  name: 'Hochschule Emden/Leer',
  ort: 'Emden',
};

// Eigenschaft hinzufügen
hochschule.postleitzahl = '26723';                // Dot-Notation
hochschule['bundesland'] = 'Niedersachsen';       // Bracket-Notation

// Methode hinzufügen
hochschule.info = function() {
  alert(this.name + ' befindet sich in ' + this.ort + ', ' + this.bundesland + '.');
};

hochschule.info(); // Methode aufrufen

Verwendung vorgefertigter Objekte

JavaScript bietet eine Vielzahl vorgefertigter Objekte, die vom Browser bereitgestellt werden, z. B. window und document.

const myDiv = document.createElement('div');
window.open("https://www.hs-emden-leer.de");

Für Funktionalitäten, die keine direkten Objekte bieten, wie z. B. die Notification API, müssen mit dem Schlüsselwort new Instanzen erzeugt werden.

const notification = new Notification('Neue Nachricht für Medientechnik-Studierende');

Es gibt aber nicht nur object literals, sondern auch Klassen-Objekte. Diese werden auf den folgenden Seiten behandelt.