Closures
Scope kennen Sie schon: welche Namen von hier aus sichtbar sind. Ein Schritt weiter: Eine innere Funktion kann einen äußeren Namen noch nutzen, nachdem der äußere Aufruf fertig ist. Diese bleibende Verbindung heißt Closure.
Was ein Closure bedeutet
Ein Closure entsteht, wenn eine Funktion in einer anderen erzeugt wird und später noch auf die Bindungen der äußeren Funktion zugreift. Der äußere Aufruf kann vorbei sein; die innere Funktion „merkt“ sich diese Namen trotzdem. Das Wort closure schreiben Sie nicht in den Code — Sie schreiben verschachtelte Funktionen, und JavaScript hält die nötigen äußeren Bindungen am Leben.
Drei Teile im Blick
📊 Äußere Funktion, Bindung und innere Funktion
| Teil | Rolle | Hinweis für Einsteiger |
|---|---|---|
| äußere Funktion | läuft einmal (oder öfter) und gibt oft eine innere Funktion zurück | der „Setup“-Aufruf |
| äußere Bindung | Parameter oder let / const in der äußeren Funktion |
der Wert, den die innere noch braucht |
| innere Funktion | nutzt diese Bindung, wenn Sie sie später aufrufen | die Funktion, die Sie behalten |
Können Sie diese drei zeigen, erklären Sie fast jedes Anfänger-Closure-Beispiel. Die Überraschung ist nicht die Verschachtelung — sondern dass die äußere Bindung nach dem äußeren return noch nützlich bleibt.
function makeLine(title) {
function show() {
console.log(title);
}
show();
}
makeLine("Shop");
Während des Aufrufs schaut die innere nach außen
show hat kein lokales title. Die Suche geht nach außen zu makeLine und findet den Parameter. Das ist gewöhnlicher verschachtelter Scope. Closures gehen einen Schritt weiter: Behalten Sie show (oder eine Zwillingin) für später, nachdem makeLine zurückgekehrt ist.
function makeLine(title) {
return function show() {
console.log(title);
};
}
let printShop = makeLine("Shop");
printShop();
Der äußere Aufruf endet — der Speicher bleibt
makeLine("Shop") gibt eine Funktion zurück. Rufen Sie später printShop auf, druckt es noch Shop. Der Parameter title aus diesem beendeten Aufruf ist noch erreichbar. Dieses bleibende Festhalten ist das Closure.
function makeGreeter(name) {
return function () {
return "Hello, " + name;
};
}
let hiSara = makeGreeter("Sara");
console.log(hiSara());
Fabriken geben eine fertige Funktion zurück
makeGreeter ist eine kleine Fabrik: ein äußerer Aufruf, eine angepasste Funktion zurück. hiSara begrüßt immer Sara, weil sie über dieses name geschlossen hat. Anderes Argument an makeGreeter — anderer Grüßer, gleiches Muster, neuer Speicher.
function makeCounter() {
let n = 0;
return function () {
n = n + 1;
return n;
};
}
let tick = makeCounter();
console.log(tick());
console.log(tick());
Fast privater Zustand mit einem Zähler
n lebt in der äußeren Funktion. Äußerer Code greift nicht direkt auf n zu — nur die zurückgegebene Funktion kann das. Erster Aufruf liefert 1, zweiter 2. Der Zähler „merkt“ ohne globale Variable.
function makeCounter() {
let n = 0;
return function () {
n = n + 1;
return n;
};
}
let a = makeCounter();
let b = makeCounter();
console.log(a());
console.log(a());
console.log(b());
Jeder äußere Aufruf hat eigenen Speicher
a und b stammen von getrennten makeCounter()-Aufrufen, also hat jedes sein eigenes n. Zwei Schritte auf a lassen b trotzdem bei seinem ersten Schritt. Closures teilen nicht automatisch einen Zustandsbeutel — außer Sie teilen absichtlich eine äußere Bindung.
Geschlossenen Wert auf der Seite zeigen
Bauen Sie mit der Fabrik einen Grüßer, rufen Sie ihn einmal auf und legen Sie den zurückgegebenen String in einen Absatz.
<!DOCTYPE html>
<html>
<head>
<title>closures — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function makeGreeter(name) {
return function () {
return "Hello, " + name;
};
}
let hi = makeGreeter("Omar");
let box = document.getElementById("msg");
box.textContent = hi();
</script>
</body>
</html>
Der Absatz zeigt Hello, Omar. Der äußere Aufruf ist vorbei; hi kennt name noch. Ändern Sie nur den String an makeGreeter, aktualisieren Sie, lesen Sie die neue Zeile. Als Nächstes: Objekte — zusammengehörige Werte unter einem Namen.
Übungen
- Schreiben Sie eine Funktion, die eine innere Funktion zurückgibt, die einen äußeren Parameter loggt.
- Speichern Sie die zurückgegebene Funktion und rufen Sie sie nach dem äußeren Aufruf auf.
- Bauen Sie
makeGreeter("Lina")und loggen Sie den zurückgegebenen String. - Erzeugen Sie einen Zähler; rufen Sie ihn zweimal auf und prüfen Sie
1dann2. - Erzeugen Sie zwei Zähler; erhöhen Sie nur den ersten zweimal und prüfen Sie, dass der zweite bei
1startet. - Ändern Sie in der HTML-Demo nur das Namensargument, aktualisieren Sie, lesen Sie den Absatz.
Häufige Stolperfallen
- Annehmen, äußere Lokale verschwinden sofort beim
return— die innere kann sie noch sehen - Erwarten, dass jeder
makeCounter()-Aufruf ein gemeinsamesnteilt — meist hat jeder Aufruf eigenen Speicher - Denken, „Closure“ bedeute nur das Schlüsselwort
return—returnkann die innere Funktion zurückgeben, der Speicher ist die geschlossene Bindung - Jeden gemerkten Wert auf das globale Objekt legen „zur Vereinfachung“
- Hier die volle Objekt-Lektion erwarten — Eigenschaften unter einem Wert bündeln ist die nächste Seite
Kurzfassung
- Ein Closure lässt eine innere Funktion äußere Namen nach dem äußeren Aufruf weiter nutzen
- Sie schreiben verschachtelte Funktionen; JavaScript hält die nötigen Bindungen am Leben
- Fabriken geben eine angepasste Funktion zurück, die Setup-Werte merkt
- Zähler verstecken ein privates
nhinter der zurückgegebenen Funktion - Getrennte äußere Aufrufe bedeuten meist getrennte Speicher
- Seitenupdates können einen String aus einem geschlossenen Namen zeigen
- Als Nächstes: Objekte — zusammengehörige Werte unter einem Namen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt