JavaScript Academy · Lektion

Call stack

Se, hvordan funktionskald spores.

Lektion 1 af 413 trin

Call stack er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er kaldestakken?

Kaldestakken er den måde, JavaScript holder styr på, hvilken funktion der kører nu, og hvor der skal returneres til. Hvert funktionskald lægges øverst på stakken; når det er færdigt, tages det af igen.

Det er en LIFO-struktur: Sidst ind, først ud.

Lægge på og tage af

Når du kalder en funktion, lægges en stakramme på. Når den returnerer, tages rammen af. Hold øje med rækkefølgen af logudskrifter, når kald indlejres.

function first() {
  console.log('first start');
  second();
  console.log('first end');
}

function second() {
  console.log('second');
}

first();

LIFO i praksis

Den funktion, der senest blev kaldt, skal afslutte, før den underliggende funktion kan fortsætte. Det indre kald afsluttes først, selv om det blev startet sidst.

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();

Synkron betyder blokerende

JavaScript kører én ting ad gangen på en enkelt tråd. Så længe stakken har rammer, kører intet andet. Synkron kode blokerer, indtil den er færdig.

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ærdier bevæger sig nedad

Når hver ramme tages af, sendes dens returværdi tilbage til den kaldende funktion, som venter længere nede på stakken.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}

console.log(sumOfSquares(3, 4));

Rekursion udvider stakken

Hvert rekursivt kald tilføjer endnu en ramme. Stakken vokser, indtil basistilfældet nås, og tømmes derefter ramme for ramme.

function countdown(n) {
  if (n === 0) {
    console.log('liftoff');
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(3);

Stakoverløb

Stakken har en begrænset størrelse. Rekursion uden et basistilfælde bliver ved med at lægge rammer på, indtil motoren udløser RangeError: Maximum call stack size exceeded.

function endless(n) {
  return endless(n + 1);
}

try {
  endless(1);
} catch (e) {
  console.log(e.name);
}

Udførelsesrækkefølgen er forudsigelig

Fordi stakken følger LIFO strengt, og koden er synkron, er rækkefølgen af synkrone logudskrifter altid deterministisk. Du kan gennemgå den i hånden.

function outer() {
  console.log(1);
  inner();
  console.log(3);
}
function inner() {
  console.log(2);
}
outer();
console.log(4);

Hvor asynkron kode kommer ind

Kaldestakken kører kun synkron kode. Funktioner som setTimeout overlader arbejde til miljøet, som senere placerer tilbagekald i køer. Disse tilbagekald kører kun, når stakken er tom.

Dette er broen til hændelsesløkken.

console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');

Stakken skal tømmes først

Selv en timer med nul millisekunder venter på, at al synkron kode er færdig. Tilbagekaldet kan ikke køre, mens der stadig er rammer på stakken.

console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');

Hvorfor kaldestakken er vigtig

En forståelse af kaldestakken forklarer, hvorfor lange synkrone løkker får en side til at fryse, hvorfor rekursion kan give stakoverløb, og hvorfor asynkrone tilbagekald altid kører til sidst. Den er grundlaget for alt i hændelsesløkken.

function compute() {
  return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');

Hurtigt tjek

Hvilket rækkefølgeprincip følger kaldestakken?

Opsummering: kaldestakken

Du har lært om motorens kerne for udførelse:

  • Kaldestakken holder styr på kørende funktioner i LIFO-rækkefølge.
  • JavaScript er enkelttrådet, og synkron kode blokerer.
  • Rekursion udvider stakken og kan give stakoverløb.
  • Asynkrone tilbagekald venter, indtil stakken er tom, hvilket fører os til hændelsesløkken.
Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
59
Lektioner
200

Ofte stillede spørgsmål

Er lektionen “Call stack” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Call stack”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Call stack”?

Se, hvordan funktionskald spores. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Call stack”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Call stack
  2. Macrotasks og task-køen
  3. Microtasks og promises
  4. queueMicrotask og rækkefølge
← Tilbage til JavaScript Academy