Anropsstacken
Se hur funktionsanrop spåras.
Anropsstacken är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad är anropsstacken?
Anropsstacken är det sätt på vilket JavaScript håller reda på vilken funktion som körs just nu och vart körningen ska återvända. Varje funktionsanrop läggs överst; när funktionen är klar tas det bort.
Det är en LIFO-struktur: Last In, First Out.
Lägga till och ta bort från stacken
När Du anropar en funktion läggs en stackram till. När funktionen returnerar tas ramen bort. Observera loggarnas ordning när anrop nästlas.
function first() {
console.log('first start');
second();
console.log('first end');
}
function second() {
console.log('second');
}
first();LIFO i praktiken
Den senast anropade funktionen måste bli klar innan funktionen under den kan fortsätta. Det inre anropet slutförs först, trots att det startade sist.
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();Synkront innebär blockerande
JavaScript kör en sak i taget på en enda tråd. Så länge stacken innehåller ramar körs inget annat. Synkron kod blockerar tills den är klar.
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');Returvärden flödar nedåt
När varje ram tas bort flödar dess returvärde tillbaka till anroparen som väntar under den på stacken.
function square(n) {
return n * n;
}
function sumOfSquares(a, b) {
return square(a) + square(b);
}
console.log(sumOfSquares(3, 4));Rekursion växer stacken
Varje rekursivt anrop lägger till ytterligare en ram. Stacken växer tills basfallet nås och avvecklas sedan ram för ram.
function countdown(n) {
if (n === 0) {
console.log('liftoff');
return;
}
console.log(n);
countdown(n - 1);
}
countdown(3);Stackoverflow
Stacken har en begränsad storlek. Rekursion utan basfall fortsätter att lägga till ramar tills motorn kastar RangeError: Maximum call stack size exceeded.
function endless(n) {
return endless(n + 1);
}
try {
endless(1);
} catch (e) {
console.log(e.name);
}Körningsordningen är förutsägbar
Eftersom stacken strikt följer LIFO och är synkron är ordningen på synkrona loggar alltid deterministisk. Du kan följa den för hand.
function outer() {
console.log(1);
inner();
console.log(3);
}
function inner() {
console.log(2);
}
outer();
console.log(4);Var asynkronitet kommer in
Anropsstacken kör endast synkron kod. Funktioner som setTimeout lämnar över arbete till miljön, som senare placerar callback-funktioner i köer. Dessa callback-funktioner körs först när stacken är tom.
Detta är länken till händelseloopen.
console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');Stacken måste tömmas först
Även en timer med noll millisekunders fördröjning väntar tills all synkron kod har körts klart. Callback-funktionen kan inte köras så länge det finns ramar kvar på stacken.
console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');Varför anropsstacken är viktig
Om Du förstår anropsstacken förstår Du varför långa synkrona loopar fryser en sida, varför rekursion kan orsaka stackoverflow och varför asynkrona callback-funktioner alltid körs sist. Den är grunden för allt i händelseloopen.
function compute() {
return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');Snabb kontroll
Vilken ordningsprincip följer anropsstacken?
Repetition: Anropsstacken
Du har lärt Dig motorns centrala exekveringsmodell:
- Anropsstacken håller reda på körande funktioner i LIFO-ordning.
- JavaScript är entrådigt, och synkron kod blockerar.
- Rekursion växer stacken och kan orsaka stackoverflow.
- Asynkrona callback-funktioner väntar tills stacken är tom, vilket leder oss till händelseloopen.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Anropsstacken” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Anropsstacken”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Anropsstacken”?
Se hur funktionsanrop spåras. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Anropsstacken”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.