7.4.3 Objekte mit Konstruktor-Funktionen erstellen

Bis zur Version JavaScript 2015 gab es kein Schlüsselwort class, und Objekte wurden mit sogenannten Konstruktor-Funktionen erstellt. Diese Methode wird noch genutzt (bzw. in vorhandenen JavaScript-Programmen gefunden), auch wenn sich die modernen class-Klassen durchgesetzt haben.

Konstruktor-Funktionen und JavaScript-Objektorientierung

Die Arbeit mit Konstruktor-Funktionen und object literals in JavaScript verdeutlicht, dass die Objektorientierung hier „etwas anders“ funktioniert als in Sprachen wie z. B. Java.

Eine Konstruktor-Funktion wird wie eine normale Funktion definiert. Ihr Name sollte mit einem Großbuchstaben beginnen, um sie von „normalen“ Funktionen zu unterscheiden. Konstruktor-Funktionen nehmen typischerweise Parameter entgegen, die für die Initialisierung eines Objekts erforderlich sind.

Hier ein Beispiel, in dem ein Student-Objekt über eine Konstruktor-Funktion erzeugt wird:

function Student(name, matrikelnummer, studiengang, vorlesungen) {
  this.name           = name;
  this.matrikelnummer = matrikelnummer;
  this.studiengang    = studiengang;
  this.vorlesungen    = vorlesungen;

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

Objekte aus Konstruktor-Funktionen erstellen

Um ein Objekt aus der Konstruktor-Funktion zu erzeugen, wird das Schlüsselwort new verwendet:

const studentLena = new Student(
  'Lena', 
  '720234', 
  'Medientechnik', 
  ['Mediendesign', 'Computergrafik', 'Nachrichtentechnik']
);
Zu lange Parameterliste

Wenn eine Parameterliste zu lang ist:

const studentLena = new Student('Lena', '720234', 'Medientechnik', ['Mediendesign', 'Computergrafik', 'Nachrichtentechnik']);
verwendet man gerne die Version, in der alle Parameter übersichtlich untereinander aufgeführt werden.

const studentLena = new Student(
  'Lena', 
  '720234', 
  'Medientechnik', 
  ['Mediendesign', 'Computergrafik', 'Nachrichtentechnik']
);

Die Verwendung des erstellten Objekts funktioniert genauso wie bei object literals, z. B. mit der Klammernotation oder der Punktnotation.

Punktnotation

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

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


Vorteile von Konstruktor-Funktionen

Der Vorteil von Konstruktor-Funktionen (und später class-Klassen) ist, dass damit sehr schnell immer gleich strukturierte Objekte erstellt und gleichzeitig genutzt werden können. Bei object literals müsste entweder ein komplett neues Objekt (z. B. durch Copy & Paste) erstellt werden, oder das bestehende Objekt müsste überschrieben werden, was eine gleichzeitige Nutzung ausschließt.

Mit Konstruktor-Funktionen (wie mit class-Klassen) muss nur eine neue Instanz erzeugt werden:

1
2
3
const studentAnna = new Student('Anna', '720234', 'Medientechnik',...);
const studentMax = new Student('Max', '720235', 'Medientechnik',...);
const studentLisa = new Student('Lisa', '720236', 'Medientechnik',...);