Der Call Stack
Sehen Sie, wie Funktionsaufrufe verfolgt werden.
Der Call Stack 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 der Call-Stack?
Der Call-Stack verfolgt in JavaScript, welche Funktion gerade ausgeführt wird und wohin anschließend zurückgekehrt werden soll. Jeder Funktionsaufruf wird oben auf dem Stack abgelegt; sobald er abgeschlossen ist, wird er wieder entfernt.
Er ist eine LIFO-Struktur: Zuletzt hinein, zuerst hinaus.
Ablegen und Entfernen
Wenn Sie eine Funktion aufrufen, wird ein Stack-Frame abgelegt. Bei der Rückkehr wird der Frame entfernt. Achten Sie auf die Reihenfolge der Protokolleinträge, während sich Aufrufe verschachteln.
function first() {
console.log('first start');
second();
console.log('first end');
}
function second() {
console.log('second');
}
first();LIFO in Aktion
Die zuletzt aufgerufene Funktion muss abgeschlossen sein, bevor die darunterliegende Funktion fortgesetzt wird. Der innere Aufruf wird zuerst beendet, obwohl er zuletzt begonnen hat.
function a() {
console.log('enter a');
b();
console.log('exit a');
}
function b() {
console.log('enter b');
c();
console.log('exit b');
}
function c() {
console.log('c runs');
}
a();Synchron bedeutet blockierend
JavaScript führt in einem einzelnen Thread immer nur eine Sache gleichzeitig aus. Solange sich Frames auf dem Stack befinden, wird nichts anderes ausgeführt. Synchroner Code blockiert, bis er abgeschlossen ist.
console.log('start');
function busy() {
let sum = 0;
for (let i = 0; i < 1000; i++) sum += i;
return sum;
}
console.log(busy());
console.log('end');Rückgabewerte fließen nach unten
Wenn jeder Frame entfernt wird, fließt sein Rückgabewert zurück zur aufrufenden Funktion, die darunter auf dem Stack wartet.
function square(n) {
return n * n;
}
function sumOfSquares(a, b) {
return square(a) + square(b);
}
console.log(sumOfSquares(3, 4));Rekursion vergrößert den Stack
Jeder rekursive Aufruf fügt einen weiteren Frame hinzu. Der Stack wächst, bis der Basisfall erreicht ist, und wird anschließend Frame für Frame abgebaut.
function countdown(n) {
if (n === 0) {
console.log('liftoff');
return;
}
console.log(n);
countdown(n - 1);
}
countdown(3);Stack-Überlauf
Der Stack hat eine begrenzte Größe. Rekursion ohne Basisfall legt so lange Frames ab, bis die Engine RangeError: Maximum call stack size exceeded auslöst.
function endless(n) {
return endless(n + 1);
}
try {
endless(1);
} catch (e) {
console.log(e.name);
}Die Ausführungsreihenfolge ist vorhersehbar
Da der Stack strikt nach dem LIFO-Prinzip und synchron arbeitet, ist die Reihenfolge synchroner Protokolleinträge immer deterministisch. Sie können sie von Hand nachvollziehen.
function outer() {
console.log(1);
inner();
console.log(3);
}
function inner() {
console.log(2);
}
outer();
console.log(4);Wo asynchrone Ausführung beginnt
Der Call-Stack führt nur synchronen Code aus. Funktionen wie setTimeout übergeben Arbeit an die Umgebung, die Callbacks später in Warteschlangen einreiht. Diese Callbacks werden erst ausgeführt, wenn der Stack leer ist.
Das bildet die Brücke zur event loop.
console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');Der Stack muss zuerst geleert werden
Selbst ein Timer mit null Millisekunden wartet, bis der gesamte synchrone Code abgeschlossen ist. Der Callback kann nicht ausgeführt werden, solange sich noch Frames auf dem Stack befinden.
console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');Warum der Call-Stack wichtig ist
Das Verständnis des Call-Stacks erklärt, warum lange synchrone Schleifen eine Seite einfrieren, warum Rekursion zu einem Überlauf führen kann und warum asynchrone Callbacks immer zuletzt ausgeführt werden. Er bildet die Grundlage für alles in der event loop.
function compute() {
return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');Kurzer Test
Welchem Ordnungsprinzip folgt der Call-Stack?
Zusammenfassung: Der Call-Stack
Sie haben den Ausführungskern der Engine kennengelernt:
- Der Call-Stack verfolgt laufende Funktionen in LIFO-Reihenfolge.
- JavaScript ist Single-Threaded, und synchroner Code blockiert.
- Rekursion vergrößert den Stack und kann einen Überlauf verursachen.
- Asynchrone Callbacks warten, bis der Stack leer ist, und führen uns damit zur event loop.
Häufig gestellte Fragen
Ist die Lektion „Der Call Stack“ kostenlos?
Ja — der vollständige Text von „Der Call Stack“ 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 „Der Call Stack“?
Sehen Sie, wie Funktionsaufrufe verfolgt werden. 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 „Der Call Stack“?
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.