Konstruktoren und this

Kurz gesagt: Der Konstruktor in JavaScript ist die Methode constructor, die bei new läuft und die Felder des Objekts über this füllt.

Problem

Kaffee für NaN €

Du erzeugst ein Produkt, genau wie in der letzten Lektion, und füllst die Felder Zeile für Zeile. Eine Zeile hast du vergessen:

const coffee = new Product();
coffee.name = "Kaffee";
coffee.quantity = 2;
console.log(`${coffee.name}: ${coffee.price * coffee.quantity} €`);

Ausgabe

Kaffee: NaN €

Der Kaffee kostet NaN € (Not a Number): Der Preis ist undefined, und undefined * 2 ist keine Zahl. JavaScript beschwert sich nicht. Je mehr Felder eine Klasse hat, desto leichter vergisst du eines. Und ein Produkt ohne Preis sollte es gar nicht geben können.

Die Idee

Konstruktor: ohne diese Daten kein Objekt

Eine Klasse kann sagen, was sie braucht, bevor du ein Objekt aus ihr erzeugen kannst. Dafür gibt es den Konstruktor: eine besondere Methode, die bei new läuft.

shop.js

class Product {
  name;
  price;
  quantity;

  constructor(name, price, quantity) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }
}

const coffee = new Product("Kaffee", 7.50, 2);
console.log(`${coffee.name}: ${coffee.price * coffee.quantity} €`);

Ausgabe

Kaffee: 15 €

• Der Konstruktor heißt constructor, in jeder Klasse.
• Seine Parameter sind die Daten, ohne die ein Produkt nicht auskommt. Du übergibst sie in den Klammern von new: new Product("Kaffee", 7.50, 2).
• Er gibt nichts zurück. new gibt das neue Objekt zurück.

Jetzt wird der Preis in derselben Zeile gesetzt, die das Produkt erzeugt, und du siehst, wenn er fehlt. Aber JavaScript zählt die Argumente nicht. Wenn du zwei statt drei übergibst, läuft das Programm, und die Stückzahl ist undefined:

const coffee = new Product("Kaffee", 7.50);

Ausgabe

undefined
Kaffee: NaN €

Die Anzahl der Argumente prüfst du also selbst. Wie ein Konstruktor ein schlechtes Objekt ablehnen kann, siehst du im Modul „Fehler und Exceptions“.

constructor(name, price, quantity) {
  this.name = name;
  this.price = price;
  this.quantity = quantity;
}

const coffee = new Product("Kaffee", 7.50, 2);
console.log(`${coffee.name}: ${coffee.price * coffee.quantity} €`);

Schritt für Schritt, in Worten

1. new legt ein neues Objekt an. Seine Felder sind noch undefined.
2. Der Konstruktor läuft. Die Argumente werden in seine Parameter kopiert.
3. this.name = name: vom Parameter in das Feld dieses Objekts.
4. Dasselbe für Preis und Stückzahl.
5. Der Konstruktor ist fertig, und die Parameter verschwinden. coffee bekommt einen Pfeil auf das fertige Objekt.
6. Das Objekt kommt schon gefüllt aus new, deshalb ist der Preis nicht undefined.

Die Idee

this: das Feld dieses Objekts

Im Konstruktor gibt es zwei Dinge namens name: den Parameter und das Feld. Der bloße Name ist der Parameter. Für das Feld schreibst du this.name.

constructor(name, price, quantity) {
  this.name = name;
  this.price = price;
  this.quantity = quantity;
}

this ist das Objekt, das gerade entsteht. this.name = name; bedeutet „speichere den Parameter name im Feld name dieses Objekts“.

In JavaScript ist this. Pflicht, sobald du ein Feld anfasst. Ohne es ist name immer der Parameter (oder eine andere Variable), nie das Feld.

Probier es aus

Finde den Fehler

Das Programm soll „Tee: 3.2 €“ ausgeben. Stattdessen gibt es „undefined: 3.2 €“ aus. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

1class Product {2 name;3 price;45 constructor(name, price) {6 name = name;7 this.price = price;8 }9}1011const tea = new Product("Tee", 3.20);12console.log(`${tea.name}: ${tea.price} €`);

Prüfen

Die Idee

Und new Product() aus der letzten Lektion?

In der letzten Lektion gab es keinen Konstruktor, und new Product() hat funktioniert: Wenn du keinen Konstruktor schreibst, fügt JavaScript einen leeren hinzu. Sobald du einen eigenen schreibst, ruft jedes new ihn auf.

JavaScript prüft aber nicht, ob alle Argumente übergeben werden. new Product() funktioniert weiterhin, und die Felder bleiben undefined:

const empty = new Product();

Ausgabe

Product { name: undefined, price: undefined, quantity: undefined }

console.log auf einem Objekt zeigt seine Felder. Hier siehst du, dass keines davon gefüllt ist. In Java und C# lässt sich so eine Zeile nicht kompilieren, in JavaScript liegt es an dir: Übergib alle Argumente.

Die Idee

Eine Standard-Stückzahl

Die meisten Produkte im Warenkorb kommen einzeln. Jedes Mal 1 zu tippen wird lästig.

In JavaScript kann eine Klasse nur einen constructor haben. Statt eines zweiten Konstruktors bekommt der Parameter einen Standardwert: Wenn du keine Stückzahl übergibst, ist sie 1.

constructor(name, price, quantity = 1) {
  this.name = name;
  this.price = price;
  this.quantity = quantity;
}

quantity = 1 bedeutet „wenn keine Stückzahl übergeben wird, nimm 1“. Setz so einen Parameter ans Ende: Dann kannst du ihn beim Aufruf einfach weglassen.

Genauer, für Neugierige

Ein zweiter constructor in der Klasse ist ein Fehler, und das Programm startet gar nicht erst:

Fehler

SyntaxError: A class may only have one constructor

Der Vorteil eines einzigen Konstruktors: Wenn du morgen eine Prüfung des Preises hinzufügst, steht sie an einer Stelle.

Probier es aus

Welcher Konstruktor?

Was gibt das Programm aus?

class Product {
  name;
  price;
  quantity;

  constructor(name, price, quantity = 1) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }
}

const bread = new Product("Brot", 1.20);
const milk = new Product("Milch", 2.10, 3);
console.log(bread.quantity, milk.quantity);

Antwort

undefined 3

1 3

Nichts: Das Programm bricht mit einem Fehler ab

Prüfen

Probier es aus

Wie heißt der Konstruktor?

Was steht in der Lücke?

class Book {
  title;
  author;

  (title, author) {
    this.title = title;
    this.author = author;
  }
}

Prüfen

Übung

Objekte, die vollständig entstehen

Löse die Aufgaben in deinem Editor. Jede Klasse bekommt einen Konstruktor mit Parametern für alle ihre Felder.

1. Person. Eine Klasse Person mit Name und Alter. Erzeuge zwei Personen und gib ihre Daten aus.

Ausgabe

Maria, 34 Jahre
Peter, 19 Jahre

2. Tier. Eine Klasse Animal mit Art und Alter. Erzeuge eine 3 Jahre alte Katze und einen 7 Jahre alten Hund.

Ausgabe

Art: Katze, Alter: 3
Art: Hund, Alter: 7

3. Tanzschritt. Eine Klasse DanceMove mit Name und Dauer in Sekunden. In der Lektion „Instanzmethoden“ lernt der Schritt, sich selbst „auszuführen“.

Ausgabe

moonwalk: 5 Sek.

Weitere Aufgaben

• Ein Buch mit Konstruktor. Schreib Book aus der letzten Lektion mit einem Konstruktor constructor(title, author) neu. Wie viele Zeilen sparst du in dem Code unter der Klasse?
• Ein Produkt mit Standard-Stückzahl. Product mit quantity = 1, wie in der Lektion. Leg ein Array [new Product("Brot", 1.20, 2), new Product("Kaffee", 7.50)] an und gib von jedem Name und Stückzahl aus: „Brot x2“, „Kaffee x1“.
• Buchung. Eine Klasse Booking mit dem Namen des Gastes, der Anzahl der Nächte und dem Preis pro Nacht. Gib aus, was der Aufenthalt kostet: Für 3 Nächte zu 85 € sind das 255 €.

Test

Teste dich

1. Wann läuft der Konstruktor?

Wenn du mit new ein Objekt erzeugstWenn du ein Feld des Objekts liestEinmal, wenn das Programm startet

2. Wie heißt der Konstruktor in JavaScript?

constructor, in jeder Klasse__init__Wie die Klasse: Product

3. Der Konstruktor ist constructor(name, price). Was passiert bei new Product()?

Name und Preis werden nullDas Programm bricht mit einem Fehler abDu bekommst ein Produkt, und Name und Preis sind undefined

4. Im Konstruktor steht this.name = name; Was ist this.name?

Eine neue lokale Kopie von nameDer Parameter nameDas Feld name des Objekts, das gerade entsteht

5. Wie gibt die Klasse eine Stückzahl von 1, wenn beim Erzeugen keine übergeben wird?

Gar nicht: Alle Argumente sind PflichtMit einem Standardwert: quantity = 1Mit einem zweiten Konstruktor ohne die Stückzahl

Prüfen

Lektion von vorn beginnen

Verwandte Lektionen

• Baut auf: Arrays · Funktionen · Parameter und return · Klassen und Objekte
• Geht weiter in: Instanzmethoden · Kapselung · static: was alle Objekte teilen · Vererbung
• Aufgaben zum Thema: Klassen und Objekte