JavaScript Academy · Oppitunti

Kutsupino

Tarkastelkaa, miten funktiokutsuja seurataan.

Oppitunti 1/413 vaihetta

Kutsupino on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä kutsupino on?

Kutsupino on mekanismi, jonka avulla JavaScript seuraa parhaillaan suoritettavaa funktiota ja sitä, mihin suoritus palaa. Jokainen funktiokutsu lisätään pinon päälle, ja funktion valmistuessa se poistetaan pinosta.

Se on LIFO-rakenne: viimeisenä sisään, ensimmäisenä ulos.

Pinoon lisääminen ja pinosta poistaminen

Kun kutsutte funktiota, pinoon lisätään pinokehys. Kun funktio palauttaa arvon, kehys poistetaan pinosta. Tarkkailkaa lokien järjestystä kutsujen sisäkkäistyessä.

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

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

first();

LIFO käytännössä

Viimeksi kutsutun funktion on valmistuttava, ennen kuin sen alapuolella oleva funktio voi jatkaa. Sisempi kutsu valmistuu ensin, vaikka se aloitettiin viimeisenä.

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

Synkronisuus tarkoittaa estävää suoritusta

JavaScript suorittaa yhden asian kerrallaan yhdessä säikeessä. Kun pinossa on kehyksiä, mikään muu ei suoritu. Synkroninen koodi estää muun suorituksen, kunnes se valmistuu.

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

Paluuarvot kulkevat alaspäin

Kun kukin kehys poistetaan pinosta, sen paluuarvo kulkee pinossa alempana odottavalle kutsujalle.

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

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

Rekursio kasvattaa pinoa

Jokainen rekursiivinen kutsu lisää uuden kehyksen. Pino kasvaa, kunnes perustapaus saavutetaan, minkä jälkeen kehykset puretaan yksi kerrallaan.

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

countdown(3);

Pinon ylivuoto

Pinon koko on rajallinen. Rekursio ilman perustapausta jatkaa kehysten lisäämistä, kunnes suoritusympäristö heittää virheen RangeError: Maximum call stack size exceeded.

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

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

Suoritusjärjestys on ennustettava

Koska pino noudattaa tiukasti LIFO-järjestystä ja suoritus on synkronista, synkronisten lokien järjestys on aina deterministinen. Voitte jäljittää sen käsin.

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

Missä asynkronisuus tulee mukaan

Kutsupino suorittaa vain synkronista koodia. Funktiot, kuten setTimeout, siirtävät työn ympäristön hoidettavaksi, ja ympäristö asettaa myöhemmin takaisinsoittimet jonoihin. Takaisinsoittimet suoritetaan vasta, kun pino on tyhjä.

Tämä muodostaa sillan tapahtumasilmukkaan.

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

Pinon on tyhjennyttävä ensin

Jopa nollan millisekunnin ajastin odottaa, että kaikki synkroninen koodi on suoritettu. Takaisinsoittoa ei voida suorittaa, kun pinossa on vielä kehyksiä.

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

Miksi kutsupinolla on merkitystä

Kutsupinon ymmärtäminen selittää, miksi pitkät synkroniset silmukat jäädyttävät sivun, miksi rekursio voi aiheuttaa ylivuodon ja miksi asynkroniset takaisinsoitot suoritetaan aina viimeisenä. Se on kaiken tapahtumasilmukkaan liittyvän perusta.

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

Pikatarkistus

Mitä järjestysperiaatetta kutsupino noudattaa?

Kertaus: kutsupino

Opitte suoritusympäristön suoritusytimen:

  • Kutsupino seuraa suoritettavia funktioita LIFO-järjestyksessä.
  • JavaScript on yksisäikeinen, ja synkroninen koodi estää muun suorituksen.
  • Rekursio kasvattaa pinoa ja voi aiheuttaa ylivuodon.
  • Asynkroniset takaisinsoitot odottavat, kunnes pino on tyhjä, mikä johtaa meidät tapahtumasilmukkaan.
Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
59
Oppitunnit
200

Usein kysytyt kysymykset

Onko oppitunti ”Kutsupino” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Kutsupino”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Kutsupino”?

Tarkastelkaa, miten funktiokutsuja seurataan. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Kutsupino”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Kutsupino
  2. Makrotehtävät ja tehtäväjono
  3. Mikrotehtävät ja Promiset
  4. queueMicrotask ja suoritusjärjestys
← Takaisin: JavaScript Academy