Aufwärmen · Aufgabe 1 von 7
Zum Aufwärmen, aus Lektion I2.1: Was gibt dieser Code aus?
const proto = {hello() { return `hi ${this.name}`; }};
const a = Object.create(proto);
a.name = "Ada";
console.log(a.hello(), Object.hasOwn(a, "hello"));// I2.2 · ca. 34 Min. · Aufbau
Klassen und Konstruktoren
Nach dieser Lektion schreiben Sie eine Klasse mit constructor und Methoden, erzeugen Objekte mit new und wissen, wo ihre Methoden liegen.
Danach können Sie
- Eine Klasse mit constructor und Methoden schreiben und mit new Instanzen davon erzeugen
- Erklären, was eine Klasse im Kern ist: eine Funktion, deren Prototyp die Methoden enthält
- this in constructor und Methoden verwenden und ein fehlendes new, eine zu frühe Verwendung und ein verlorenes this beheben
Vorhersagen · Aufgabe 2 von 7
Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?
class Point { constructor(x, y) { this.x = x; this.y = y; } } const p = new Point(1, 2); console.log(typeof Point, Object.keys(p).join(","));Üben · Aufgabe 3 von 7
Ergänzen Sie den Operator, der einen Dog erzeugt.
class Dog { constructor(name) { this.name = name; } } const rex = ____ Dog("Rex");const rex =Dog("Rex");Üben · Aufgabe 4 von 7
Bringen Sie die Schritte von new Book("Momo", 304) in die richtige Reihenfolge.
- 1.Sein Prototyp wird auf Book.prototype gesetzt
- 2.new gibt das Objekt zurück, jetzt mit title und pages
- 3.Ein neues, leeres Objekt wird erzeugt
- 4.Der constructor läuft, this zeigt auf das neue Objekt
Üben · Aufgabe 5 von 7
Zwei Hunde. Was gibt dieser Code aus?
class Dog { constructor(name) { this.name = name; } bark() { return `${this.name}: woof`; } } const a = new Dog("Rex"); const b = new Dog("Bello"); console.log(a.bark === b.bark, b.bark());Denksport · Aufgabe 6 von 7
Knobelaufgabe. Dieser constructor gibt ein eigenes Objekt zurück. Was gibt der Code aus?
class Strange { constructor() { this.kind = "instance"; return {kind: "plain object"}; } } const s = new Strange(); console.log(s.kind, s instanceof Strange);Anwenden · Aufgabe 7 von 7
Kleine Aufgabe: Schreiben Sie eine Klasse Rectangle, deren constructor width und height entgegennimmt. Geben Sie ihr die Methoden area(), perimeter() und describe(), die einen Text wie "2 x 3: area 6, perimeter 10" zurückgibt, indem sie die beiden anderen aufruft. Erzeugen Sie zwei Rechtecke, geben Sie beide Beschreibungen aus und zeigen Sie, dass sie sich area teilen, dass sie Instanzen von Rectangle sind und was typeof Rectangle ist.
Prüfen Sie Ihr Ergebnis anhand dieser Liste
Selbst programmieren
Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.
Ausgearbeitetes Beispiel
Eine Klasse Book und ein Blick unter die Haube
Die Klasse Book speichert in ihrem constructor einen Titel und eine Seitenzahl und hat zwei Methoden. Zwei Bücher werden mit new erzeugt. Das Programm gibt sie aus und prüft dann, was die Klasse wirklich ist: eine Funktion, deren Prototyp describe und isLong für jedes Buch enthält. Am Ende ruft es Book ohne new auf.
main.js
class Book {
constructor(title, pages) {
this.title = title;
this.pages = pages;
}
describe() {
return `${this.title} (${this.pages} pages)`;
}
isLong() {
return this.pages > 300;
}
}
const novel = new Book("Momo", 304);
const guide = new Book("JS Pocket", 120);
console.log(novel.describe(), novel.isLong());
console.log(guide.describe(), guide.isLong());
console.log(novel);
// Under the hood: a function, and methods on its prototype.
console.log(typeof Book);
console.log(Object.getPrototypeOf(novel) === Book.prototype);
console.log(novel.describe === guide.describe, Object.hasOwn(novel, "describe"));
console.log(novel instanceof Book, novel instanceof Object);
try {
Book("Oops", 1); // forgot new
} catch (error) {
console.log(`${error.name}: ${error.message}`);
}
Ausführen mit
node main.jsAusgabe
Momo (304 pages) true
JS Pocket (120 pages) false
Book { title: 'Momo', pages: 304 }
function
true
true false
true true
TypeError: Class constructor Book cannot be invoked without 'new'- Node.js zeigt das Objekt mit seinem Klassennamen Book und nur mit seinen eigenen Daten: title und pages.
- describe ist für beide Bücher dieselbe Funktion und keine eigene Eigenschaft.
- novel ist eine Instanz von Book und von Object, weil Object.prototype weiter oben in seiner Kette liegt.
- Ohne new weigert sich die Klasse, überhaupt zu laufen.
Ändern und ausführen
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Übungen
Übung 1 von 2
Speichern, was der constructor bekommt
Temperature soll seinen celsius-Wert speichern, damit toFahrenheit() ihn verwenden kann: new Temperature(100).toFahrenheit() ist 212. Der constructor im Starter legt den Wert nur in einer lokalen Variable ab, die Methode liest this.celsius also als undefined und gibt NaN zurück. Korrigieren Sie den constructor.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Hinweise
Hinweis 1
Führen Sie die Tests aus: toFahrenheit ergibt NaN. Was ist this.celsius darin?
Hinweis 2
Eine const im constructor verschwindet, wenn der constructor endet. Daten, die ein Objekt behält, gehören an this.
Hinweis 3
this.celsius = celsius;
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export class Temperature {
constructor(celsius) {
this.celsius = celsius;
}
toFahrenheit() {
return (this.celsius * 9) / 5 + 32;
}
}
Auf dem eigenen Computer ausführen
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
main.js
export class Temperature {
constructor(celsius) {
const value = celsius;
}
toFahrenheit() {
return (this.celsius * 9) / 5 + 32;
}
}
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {Temperature} from './main.js';
test('100 Grad Celsius sind 212 Fahrenheit', () => {
const got = new Temperature(100).toFahrenheit();
assert.equal(got, 212, `new Temperature(100).toFahrenheit() ergab ${got}`);
});
test('Der celsius-Wert ist eine eigene Eigenschaft', () => {
const t = new Temperature(-40);
assert.equal(t.celsius, -40, `t.celsius ist ${t.celsius}`);
assert.equal(Object.hasOwn(t, 'celsius'), true, 'celsius sollte im constructor an this gesetzt werden');
});
test('toFahrenheit bleibt am Prototyp', () => {
const t = new Temperature(0);
assert.equal(Object.hasOwn(t, 'toFahrenheit'), false, 'toFahrenheit sollte eine Methode der Klasse sein, keine eigene Eigenschaft');
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testÜbung 2 von 2
Jeder Korb seine eigenen Artikel
Basket hat add(name, price), das den Korb zurückgibt, damit sich Aufrufe verketten lassen, und total(). Der Starter hält alle Artikel in einem einzigen Array ITEMS außerhalb der Klasse, sodass sich alle Körbe es teilen. Geben Sie jedem Korb sein eigenes Array: Legen Sie this.items in einem constructor an und verwenden Sie es in beiden Methoden. Zwei Körbe dürfen die Artikel des anderen nicht sehen.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Hinweise
Hinweis 1
Führen Sie die Tests aus: Ein neuer Korb hat schon Artikel. Wo sind sie gespeichert?
Hinweis 2
Daten, die zu einem Objekt gehören, kommen an this und werden im constructor gesetzt.
Hinweis 3
constructor() { this.items = []; } und dann this.items.push(…) und this.items.reduce(…).
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export class Basket {
constructor() {
this.items = [];
}
add(name, price) {
this.items.push({ name, price });
return this;
}
total() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}
Auf dem eigenen Computer ausführen
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
main.js
const ITEMS = [];
export class Basket {
add(name, price) {
ITEMS.push({ name, price });
return this;
}
total() {
return ITEMS.reduce((sum, item) => sum + item.price, 0);
}
}
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {Basket} from './main.js';
test('add lässt sich verketten und total addiert die Preise', () => {
const basket = new Basket().add('tea', 3).add('cake', 4);
assert.equal(basket.total(), 7, `die Summe ist ${basket.total()}`);
});
test('Ein neuer Korb ist leer', () => {
new Basket().add('tea', 3);
const fresh = new Basket();
assert.equal(fresh.total(), 0, `ein neuer Korb hat die Summe ${fresh.total()}`);
});
test('Zwei Körbe behalten ihre eigenen Artikel', () => {
const a = new Basket();
const b = new Basket();
a.add('bread', 2);
b.add('milk', 1);
assert.deepEqual([a.total(), b.total()], [2, 1], `die Summen sind ${a.total()} und ${b.total()}`);
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testHäufige Fehler
Eine Klasse ohne new aufrufen
class Book {
constructor(title) {
this.title = title;
}
}
const book = Book("Momo");
console.log(book.title);
Was Node.js ausgibt
TypeError: Class constructor Book cannot be invoked without 'new'Warum, und die Lösung
Eine Klasse lässt sich nur mit new verwenden, das das Objekt erzeugt, auf das this zeigt. Wie eine gewöhnliche Funktion aufgerufen, wirft sie sofort. Schreiben Sie const book = new Book("Momo");.
Eine Klasse vor ihrer Deklaration verwenden
const p = new Point(1, 2);
console.log(p.x);
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
Was Node.js ausgibt
ReferenceError: Cannot access 'Point' before initializationWarum, und die Lösung
Eine Funktionsdeklaration lässt sich über der Zeile aufrufen, die sie deklariert; eine Klasse nicht. Bis ihre Deklaration gelaufen ist, steht der Klassenname wie bei let oder const in der Temporal Dead Zone. Setzen Sie die Klasse über den Code, der sie verwendet, oder in ein Modul, das Sie importieren.
Eine Methode aufrufen, die ihr this verloren hat
class Dog {
constructor(name) {
this.name = name;
}
bark() {
return `${this.name}: woof`;
}
}
const rex = new Dog("Rex");
const bark = rex.bark;
console.log(bark());
Was Node.js ausgibt
TypeError: Cannot read properties of undefined (reading 'name')Warum, und die Lösung
this wird durch den Aufruf gesetzt, nicht dadurch, woher die Methode kam. bark() hat kein Objekt vor dem Punkt, und Klassencode ist strikt, also ist this undefined. Rufen Sie sie als rex.bark() auf oder verpacken Sie sie, wenn Sie sie als Callback weitergeben müssen: () => rex.bark().
JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode
Abschlussquiz
5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.
Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.