JavaScript Academy · Lekcja

Stos wywołań

Proszę zobaczyć, jak śledzone są wywołania funkcji.

Stos wywołań to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest stos wywołań?

Stos wywołań to mechanizm, za pomocą którego JavaScript śledzi aktualnie wykonywaną funkcję oraz miejsce, do którego należy wrócić. Każde wywołanie funkcji jest umieszczane na szczycie stosu, a po zakończeniu zdejmowane.

Jest to struktura typu LIFO: ostatni wszedł, pierwszy wyszedł.

Odkładanie i zdejmowanie ze stosu

Podczas wywołania funkcji na stos odkładana jest ramka stosu. Po jej zakończeniu ramka jest zdejmowana. Należy obserwować kolejność logów, gdy wywołania się zagnieżdżają.

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

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

first();

LIFO w praktyce

Ostatnio wywołana funkcja musi zakończyć działanie, zanim wznowi się funkcja znajdująca się pod nią. Wewnętrzne wywołanie kończy się jako pierwsze, mimo że rozpoczęło się jako ostatnie.

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

Synchroniczność oznacza blokowanie

JavaScript wykonuje jedną rzecz naraz w jednym wątku. Dopóki na stosie znajdują się ramki, nic innego nie jest wykonywane. Kod synchroniczny blokuje wykonanie aż do zakończenia.

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

Wartości zwracane przepływają w dół

Gdy każda ramka jest zdejmowana, jej wartość zwracana przepływa z powrotem do oczekującego na stosie wywołującego.

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

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

Rekurencja rozrasta stos

Każde rekurencyjne wywołanie dodaje kolejną ramkę. Stos rośnie do momentu osiągnięcia przypadku bazowego, a następnie jest rozwijany ramka po ramce.

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

countdown(3);

Przepełnienie stosu

Stos ma ograniczony rozmiar. Rekurencja bez przypadku bazowego nieustannie odkłada ramki, aż silnik zgłosi RangeError: Maximum call stack size exceeded.

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

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

Kolejność wykonywania jest przewidywalna

Ponieważ stos działa ściśle według zasady LIFO, a kod jest synchroniczny, kolejność synchronicznych logów jest zawsze deterministyczna. Można prześledzić ją ręcznie.

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

Gdzie pojawia się asynchroniczność

Stos wywołań wykonuje tylko kod synchroniczny. Funkcje takie jak setTimeout przekazują pracę środowisku, które później umieszcza callbacki w kolejkach. Callbacki są wykonywane dopiero, gdy stos jest pusty.

To prowadzi nas do pętli zdarzeń.

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

Najpierw stos musi się opróżnić

Nawet zegar z opóźnieniem wynoszącym zero milisekund czeka na zakończenie całego kodu synchronicznego. Callback nie może zostać wykonany, dopóki na stosie pozostają ramki.

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

Dlaczego stos wywołań ma znaczenie

Zrozumienie stosu wywołań wyjaśnia, dlaczego długie synchroniczne pętle zamrażają stronę, dlaczego rekurencja może doprowadzić do przepełnienia oraz dlaczego asynchroniczne callbacki są wykonywane na końcu. To podstawa całego działania pętli zdarzeń.

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

Szybkie sprawdzenie

Jaką zasadę kolejności stosuje stos wywołań?

Podsumowanie: stos wywołań

Poznali Państwo podstawowy mechanizm wykonywania kodu przez silnik:

Stos wywołań śledzi wykonywane funkcje w kolejności LIFO.
JavaScript jest jednowątkowy, a kod synchroniczny blokuje wykonanie.
Rekurencja powiększa stos i może doprowadzić do jego przepełnienia.
Asynchroniczne callbacki czekają, aż stos będzie pusty, co prowadzi nas do pętli zdarzeń.

Często zadawane pytania

Czy lekcja „Stos wywołań” jest bezpłatna?

Tak — pełny tekst „Stos wywołań” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Stos wywołań”?

Proszę zobaczyć, jak śledzone są wywołania funkcji. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Stos wywołań”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy