JavaScript Academy · Lektion

Wie Closures Zustand erfassen

Verstehen Sie die lexikalische Umgebung von Closures.

Wie Closures Zustand erfassen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Closure

Ein Closure ist eine Funktion zusammen mit Referenzen auf die Variablen aus dem Gültigkeitsbereich, in dem sie definiert wurde. Die innere Funktion „merkt“ sich diese Variablen, auch nachdem die äußere Funktion zurückgekehrt ist.

function outer() {
  const message = "hello";
  function inner() {
    console.log(message); // sees outer variable
  }
  inner();
}
outer(); // "hello"

Die innere Funktion zurückgeben

Der entscheidende Effekt tritt auf, wenn Sie die innere Funktion zurückgeben. Sie behält den Zugriff auf die äußere Variable, obwohl outer bereits vollständig ausgeführt wurde.

function outer() {
  const message = "remembered";
  return function () {
    console.log(message);
  };
}
const fn = outer();
fn(); // "remembered"

Lexikalischer Gültigkeitsbereich

Closures funktionieren aufgrund der lexikalischen Gültigkeitsbereiche: Eine Funktion kann auf Variablen zugreifen, die in den sie im Quellcode physisch umgebenden Gültigkeitsbereichen definiert sind, nicht in den Gültigkeitsbereichen ihres Aufrufs.

const x = 10;
function show() {
  console.log(x); // resolves where defined
}
function run() {
  const x = 99;
  show(); // still logs 10, not 99
}
run();

Per Referenz erfassen

Ein Closure erfasst die Variable selbst, nicht eine Momentaufnahme ihres Werts. Wenn sich die Variable später ändert, sieht das Closure den neuen Wert.

function make() {
  let count = 0;
  const get = () => count;
  count = 5; // changed after get defined
  return get;
}
console.log(make()()); // 5

Jeder Aufruf erzeugt einen neuen Gültigkeitsbereich

Jeder Aufruf der äußeren Funktion erstellt einen neuen Satz von Variablen. Closures aus unterschiedlichen Aufrufen teilen ihren Zustand nicht.

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a()); // 1 2
console.log(b());      // 1 (independent)

Closures über Parameter

Auch Funktionsparameter werden erfasst. Dadurch können Sie aus einer allgemeinen Funktion spezialisierte Funktionen erstellen.

function adder(x) {
  return (y) => x + y;
}
const add5 = adder(5);
console.log(add5(3));  // 8
console.log(add5(10)); // 15

Die klassische Schleifenfalle

Ein berühmter Fehler: Wenn Sie var in einer Schleife verwenden, teilen sich alle Closures dieselbe Variable. Wenn sie ausgeführt werden, ist die Schleife bereits beendet und alle sehen den letzten Wert.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 3 3 3

Die Lösung mit let

let erstellt pro Durchlauf eine neue Bindung, sodass jede Closure ihr eigenes i erfasst. Das ist die moderne Lösung.

const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 0 1 2

Closures halten Speicher aktiv

Solange eine Closure existiert, können die von ihr erfassten Variablen nicht durch die Garbage Collection freigegeben werden. Das ist normalerweise unproblematisch, kann aber zu Speicherlecks führen, wenn Sie Closures länger als nötig behalten.

function make() {
  const big = new Array(3).fill("data");
  return () => big.length;
}
const f = make();
console.log(f()); // 3 - big stays in memory via f

Closures sind überall

Callbacks, Event-Handler, setTimeout, Array-Methoden und Promises nutzen Closures, um Kontext zu speichern. Sie verwenden sie ständig, oft ohne es zu bemerken.

function greet(name) {
  return () => console.log("Hi " + name);
}
[greet("Ada"), greet("Bob")].forEach((fn) => fn());
// Hi Ada
// Hi Bob

Erfassten Zustand untersuchen

Mehrere Closures aus demselben Aufruf teilen sich die erfassten Variablen. Daher kann eine Closure lesen, was eine andere schreibt.

function pair() {
  let value = 0;
  return {
    set: (v) => { value = v; },
    get: () => value
  };
}
const p = pair();
p.set(42);
console.log(p.get()); // 42

Kurztest

So erfassen Closures Zustand.

Zusammenfassung

Eine Closure ist eine Funktion zusammen mit Verweisen auf ihren definierenden Gültigkeitsbereich. Dank der lexikalischen Sichtbarkeit merkt sie sich äußere Variablen, nachdem die äußere Funktion zurückgekehrt ist, und erfasst sie per Referenz, nicht per Wert. Jeder Aufruf der äußeren Funktion erzeugt einen unabhängigen Gültigkeitsbereich. Verwenden Sie let, um die Schleifenfalle zu vermeiden. Closures halten den erfassten Speicher aktiv und bilden die Grundlage für Callbacks überall im Code.

Häufig gestellte Fragen

Ist die Lektion „Wie Closures Zustand erfassen“ kostenlos?

Ja — der vollständige Text von „Wie Closures Zustand erfassen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Wie Closures Zustand erfassen“?

Verstehen Sie die lexikalische Umgebung von Closures. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Wie Closures Zustand erfassen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy