7.4.4 Objekte über class-Klassen erstellen

In modernen JavaScript-Versionen (seit JavaScript 2015) ist es Standard, Klassen anstelle der früher üblichen "Konstruktor-Funktion" mit dem Schlüsselwort class zu definieren.

Die Zuweisung der initialen Parameter erfolgt dabei über eine spezielle Methode constructor, die automatisch beim Erstellen per new aufgerufen wird. Es in einer JavaScript-Klassendeklaration nur eine Methode mit dem Namen constructor geben.

Beispiel: Klasse Student

Hier ein Beispiel, in dem eine Klasse Student über das Schlüsselwort class erzeugt wird:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
class Student {
  constructor(name, matrikelnummer, studiengang, vorlesungen) {
    this.name = name;
    this.matrikelnummer = matrikelnummer;
    this.studiengang = studiengang;
    this.vorlesungen = vorlesungen;
  }
  info() {
    alert(this.name + ' (Matrikelnummer: ' + this.matrikelnummer + ') studiert ' 
      + this.studiengang + ' und besucht folgende Vorlesungen: ' 
      + this.vorlesungen.join(', ') + '.');
  }
}

Objekte aus Klassen erzeugen

Um ein Objekt aus der Klasse zu erzeugen, wird das Schlüsselwort new verwendet, wie wir es schon kennen:

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

Die Verwendung des erstellten Objekts funktioniert genauso, wie wir es bereits kennen, z. B. mittels Punktnotation oder Klammernotation.

Vergleich: Konstruktor-Funktion vs. class

Zur direkten Gegenüberstellung sind hier nochmals beide Möglichkeiten aufgeführt, eine Klasse zu erzeugen. Es gibt keinen funktionalen Unterschied zwischen den beiden Schreibweisen. Die class-Schreibweise wurde eingeführt, da sie in vielen anderen Programmiersprachen verwendet wird.

Klasse erstellen mit Konstruktor-Funktion

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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(', ') + '.');
  };
}

Klasse erstellen mit class

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
class Student {
  constructor(name, matrikelnummer, studiengang, vorlesungen) {
    this.name = name;
    this.matrikelnummer = matrikelnummer;
    this.studiengang = studiengang;
    this.vorlesungen = vorlesungen;
  }
  info() {
    alert(this.name + ' (Matrikelnummer: ' + this.matrikelnummer + ') studiert ' 
      + this.studiengang + ' und besucht folgende Vorlesungen: ' 
      + this.vorlesungen.join(', ') + '.');
  }
}