Klassen und Objekte
Kurz gesagt: Eine Klasse beschreibt einen neuen Typ mit Feldern, und ein Objekt ist ein konkretes Exemplar davon, erzeugt mit new; die Variable zeigt nur auf das Objekt.
Problem
Die Preise sind durcheinander
Du schreibst den Warenkorb eines Onlineshops. Jedes Produkt hat einen Namen und einen Preis, also speicherst du sie in zwei Arrays: An Index 0 stehen der Name und der Preis des ersten Produkts, an Index 1 die des zweiten.
Du willst das Teuerste ganz vorne haben und tauschst die Preise:
const names = ["Brot", "Milch", "Kaffee"];const prices = [1.20, 2.10, 7.50];
// Das Teuerste zuerst: den ersten und den dritten Preis tauschen.const temp = prices[0];prices[0] = prices[2];prices[2] = temp;
for (let i = 0; i < names.length; i++) { console.log(`${names[i]}: ${prices[i]} €`);}Brot: 7.5 €Milch: 2.1 €Kaffee: 1.2 €Das Brot kostet jetzt 7,50 €. Die Preise sind getauscht, die Namen aber nicht. Die beiden Arrays müssen sich immer gemeinsam ändern, aber nichts zwingt dich dazu. Kommt ein drittes Array für die Stückzahlen dazu, musst du an drei denken.
Die Idee
Ein Produkt, ein Ort
Der Name und der Preis sind keine getrennten Dinge. Sie sind Teile eines Produkts. Wir wollen einen Typ „Produkt“, so wie es number für Zahlen und string für Text gibt.
So einen Typ machst du dir selbst. Er heißt Klasse:
class Product { name; price; quantity;}Die Variablen in der Klasse sind ihre Felder. Jedes Produkt hat seinen eigenen Namen, seinen eigenen Preis und seine eigene Stückzahl.
Die Klasse ist nur eine Beschreibung: „Jedes Produkt hat einen Namen, einen Preis und eine Stückzahl.“ Ein Produkt gibt es noch nicht.
Der Name der Klasse beginnt mit einem Großbuchstaben (Product), die Namen der Felder mit einem Kleinbuchstaben (name, price). So siehst du sofort, was ein Typ und was ein Wert ist.
Die Idee
new: von der Beschreibung zum Produkt
Ein konkretes Produkt erzeugst du aus der Klasse mit new. Es heißt Objekt. An seine Felder kommst du mit einem Punkt:
class Product { name; price; quantity;}
const bread = new Product();bread.name = "Brot";bread.price = 1.20;bread.quantity = 2;
const coffee = new Product();coffee.name = "Kaffee";coffee.price = 7.50;coffee.quantity = 1;
console.log(`${bread.name}: ${bread.price * bread.quantity} €`);console.log(`${coffee.name}: ${coffee.price * coffee.quantity} €`);Brot: 2.4 €Kaffee: 7.5 €- Die Klasse steht über dem Code, der sie benutzt. Eine Datei kann mehrere Klassen haben.
new Product()erzeugt ein neues Objekt. Jedes Objekt hat eigene Felder: Das Brot und der Kaffee kommen sich nicht in die Quere.bread.priceist „der Preis des Brots“. Du liest und schreibst ihn wie eine gewöhnliche Variable.const breadheißt, dassbreadimmer auf dasselbe Objekt zeigt. Die Felder des Objekts können sich trotzdem ändern.
Jetzt stehen der Name und der Preis des Produkts an einem Ort. Verschiebst du das Produkt, wandern sie mit.
Probier es aus
Nichts ist ausgefüllt
Wenn du ein Produkt erzeugst und nichts ausfüllst, was steht dann in seinen Feldern?
Was gibt das Programm aus?
const item = new Product();console.log(item.name);console.log(item.price);console.log(item.quantity);Ein Feld, das ohne Wert deklariert ist (name;), ist undefined: „noch kein Wert“. Es ist nicht 0 und auch kein leerer Text. Dasselbe gilt für eine Variable, die ohne Wert deklariert ist: Nach let total; steht in total der Wert undefined.
Probier es aus
Was fehlt?
Was gehört in die Lücke, damit es ein neues Produkt gibt?
const milk = Product();
milk.name = "Milch";
milk.price = 2.10;new: Nur new erzeugt ein Objekt. Ohne new bricht das Programm mit TypeError: Class constructor Product cannot be invoked without 'new' ab.Sieh es dir an
Die Variable zeigt auf das Objekt
Du willst den Kaffee im Angebot verkaufen, also machst du eine „Kopie“, um seinen Preis zu ändern:
const coffee = new Product();coffee.price = 10;const sale = coffee;sale.price = 8;console.log(coffee.price); // 8Schritt für Schritt, in Worten
- new erzeugt das Objekt, und seine Felder sind noch undefined. coffee bekommt einen Pfeil darauf.
- Dem Pfeil von coffee nach: Der Preis des Objekts wird 10.
- sale = coffee kopiert den Pfeil, nicht das Objekt. Zwei Pfeile, ein Objekt.
- Dem Pfeil von sale nach: Der Preis im selben Objekt wird 8.
- coffee zeigt auf dasselbe Objekt, also wird 8 ausgegeben.
Der Preis des Kaffees ist auch 8 geworden. Der Grund: Die Variable coffee ist nicht das Objekt selbst. Das Objekt liegt getrennt im Speicher, und coffee merkt sich, wo es ist: einen Pfeil auf das Objekt. So eine Variable heißt Referenz.
sale = coffee kopiert den Pfeil, nicht das Objekt. Jetzt zeigen zwei Pfeile auf ein Objekt, deshalb sieht man die Änderung über sale auch über coffee.
Dasselbe hast du in der Lektion über Arrays gesehen: sale = prices gab demselben Array einen zweiten Namen. Ein Array ist auch ein Objekt.
Die Idee
Der Rabatt funktioniert jetzt
Im Modul „Funktionen“ hat der Rabatt nicht funktioniert: Die Funktion bekam den Preis, änderte ihren eigenen Parameter, und die Änderung ging verloren. Mit einem Objekt ist das anders:
function discount(p, percent) { p.price = p.price * (100 - percent) / 100;}
const coffee = new Product();coffee.price = 10;discount(coffee, 10);console.log(coffee.price);9Der Parameter ist immer noch eine Kopie, aber eine Kopie des Pfeils. Er zeigt auf dasselbe Objekt, deshalb bleibt die Änderung an p.price auch nach der Funktion erhalten.
Genauer, für Neugierige
Wenn die Funktion ein neues Objekt in den Parameter legt, verschiebt sie nur ihre eigene Kopie des Pfeils. Das Objekt draußen ändert sich nicht:
function reset(p) { p = new Product(); p.price = 0;}
const coffee = new Product();coffee.price = 10;reset(coffee);console.log(coffee.price);10Die Idee
null: ein Pfeil ins Nichts
Eine Variable kann auf gar kein Objekt zeigen. Dann steht in ihr null: „nichts“. Wenn du über sie ein Feld lesen willst, gibt es kein Objekt, aus dem du es lesen kannst:
const gift = null;console.log(gift.name);Das Programm startet, bricht aber mit einem Fehler ab, sobald es diese Zeile erreicht:
TypeError: Cannot read properties of null (reading 'name')Das ist der häufigste Fehler mit Objekten. Was eine „Exception“ ist und wie man sie fängt, siehst du im Modul „Fehler und Exceptions“.
Auch ein Array speichert Pfeile, nicht die Produkte selbst. new Array(3).fill(null) macht drei Plätze, die noch auf kein Produkt zeigen. Jeder Platz ist null, bis du dort new Product() hineinlegst:
const cart = new Array(3).fill(null);console.log(cart[0] === null);cart[0] = new Product();cart[0].name = "Brot";console.log(cart[0].name);trueBrotProbier es aus
Finde den Fehler
Das Programm soll „Brot“ und „Milch“ ausgeben. Stattdessen gibt es zweimal „Milch“ aus. In welcher Zeile steckt der Fehler?
Wähle die Zeile mit dem Fehler.
const milk = bread; erzeugt kein neues Produkt. Jetzt zeigen milk und bread auf dasselbe Objekt, und der Name „Milch“ ersetzt „Brot“. Die Korrektur ist const milk = new Product();.
Übung
Deine Klassen
1. Buch. Eine Klasse Book mit Feldern für den Titel und den Autor. Erzeuge zwei Bücher und gib sie aus.
Der Prozess von Franz KafkaEffi Briest von Theodor Fontane2. Auto. Eine Klasse SimpleCar mit einem Feld für die Geschwindigkeit. Erzeuge ein Auto (seine Geschwindigkeit ist 0), erhöhe die Geschwindigkeit um 10 und gib sie aus. Gib dem Feld einen Startwert (speed = 0;): Ohne ihn ergibt undefined + 10 den Wert NaN, „keine Zahl“. In der Lektion „Instanzmethoden“ wird daraus eine Methode des Autos.
Geschwindigkeit nach dem Beschleunigen: 103. Der Warenkorb. Der Warenkorb von der ersten Karte, diesmal mit einem Array aus drei Product-Objekten: Brot 1,20 € (2 Stück), Milch 2,10 € (1 Stück), Kaffee 7,50 € (1 Stück). Gib den Betrag für jede Zeile und die Gesamtsumme aus. Erzeuge jedes Produkt zuerst mit new Product() und lege es dann in das Array.
Brot x2: 2.4 €Milch x1: 2.1 €Kaffee x1: 7.5 €Summe: 12 €4. Das Teuerste zuerst. Sortiere denselben Warenkorb nach Preis, vom teuersten zum billigsten, mit dem Bubblesort aus der Lektion über Arrays. Diesmal tauschst du ganze Produkte, deshalb wandern der Name und der Preis zusammen.
Kaffee: 7.5 €Milch: 2.1 €Brot: 1.2 €Weitere Aufgaben
- Schüler. Eine Klasse
Studentmit einem Namen und drei Noten (drei Felder). Erzeuge zwei Schüler und gib die Durchschnittsnote von jedem aus. - Ein Buch, zwei Namen. Erzeuge ein Buch, speichere es in zwei Variablen und ändere den Titel über die zweite. Gib den Titel über die erste aus. Erkläre in Worten, warum das so ist.
Test