Motorul JavaScript (care se găsește într-un mediu de găzduire precum browserul), este un interpret cu un singur fir care cuprinde o grămadă și o singură stivă de apeluri. Browserul oferă API-uri web precum DOM, AJAX și Timers.

Acest articol are ca scop explicarea a ceea ce este stiva de apeluri și de ce este necesară. Înțelegerea stivei de apeluri va da claritate despre modul în care funcționează „ierarhia funcției și ordinea de execuție” în motorul JavaScript.

Stiva de apeluri este utilizată în principal pentru invocarea funcției (apel). Deoarece stiva de apeluri este simplă, executarea funcției (funcțiilor) se face, pe rând, de sus în jos. Înseamnă că stiva de apeluri este sincronă.

Înțelegerea stivei de apeluri este vitală pentru programarea asincronă (pe care o vom analiza într-un articol ulterior).

În JavaScript asincron, avem o funcție de apel invers, o buclă de evenimente și o coadă de sarcini. Funcția de apel invers este acționată de stiva de apel în timpul execuției după ce funcția de apel înapoi a fost împinsă în stivă de bucla evenimentului.

Dar înainte de a sări arma, să încercăm mai întâi să răspundem la întrebarea – Care este stiva de apeluri?

ad-banner

La cel mai de bază nivel, o stivă de apeluri este o structură de date care folosește principiul Last In, First Out (LIFO) pentru a stoca și gestiona temporar invocarea funcției (apel).

Să descompunem definiția noastră:

LIFO: Când spunem că stiva de apeluri funcționează conform principiului structurii de date din Last In, First Out, înseamnă că ultima funcție care este împinsă în stivă este prima care va fi pop out, când funcția revine.

Să aruncăm o privire la un eșantion de cod pentru a demonstra LIFO imprimând o eroare de urmărire a stivei pe consolă.

function firstFunction(){
  throw new Error('Stack Trace Error');
}

function secondFunction(){
  firstFunction();
}

function thirdFunction(){
  secondFunction();
}

thirdFunction();

Când codul este rulat, vom primi o eroare. Este tipărit un teanc care arată cum funcțiile sunt stivuite una peste alta. Uitați-vă la diagramă.

Pila de apeluri JavaScript Ce este si de ce
Eroare de urmărire a stivei

Veți observa că dispunerea funcțiilor ca stivă începe cu firstFunction() (care este ultima funcție care a intrat în stivă și care apare pentru a arunca eroarea), urmată de secondFunction(), și apoi thirdFunction() (care este prima funcție care este împinsă în stivă atunci când codul este executat).

Stocați temporar: Când este invocată o funcție (numită), funcția, parametrii și variabilele sale sunt împinse în stiva de apel pentru a forma un cadru de stivă. Acest cadru de stivă este o locație de memorie în stivă. Memoria este ștearsă când funcția revine pe măsură ce este scoasă din stivă.

1612100585 868 Pila de apeluri JavaScript Ce este si de ce
Credit de imagine: CMU

Gestionați invocarea funcției (apel): Stiva de apeluri menține o înregistrare a poziției fiecărui cadru de stivă. Cunoaște următoarea funcție care trebuie executată (și o va elimina după executare). Aceasta este ceea ce face sincronizarea executării codului în JavaScript.

Gândește-te că stai la coadă, într-un punct de numerar al unui magazin alimentar. Puteți fi asistat numai după ce persoana din fața dvs. a fost asistată. E sincron.

Aceasta este ceea ce înțelegem prin „gestionarea invocării funcției”.

Cum gestionează stiva de apeluri funcția apelurilor?

Vom răspunde la această întrebare uitându-ne la un exemplu de cod al unei funcții care numește o altă funcție. Iată exemplul de cod:

function firstFunction(){
  console.log("Hello from firstFunction");
}

function secondFunction(){
  firstFunction();
  console.log("The end from secondFunction");
}

secondFunction();
1612100585 904 Pila de apeluri JavaScript Ce este si de ce
Iată rezultatul

Iată ce se întâmplă când este rulat codul:

1. Când secondFunction() se execută, se creează un cadru de stivă gol. Este punctul principal de intrare (anonim) al programului.
2. secondFunction() apoi sună firstFunction()care este împins în stivă.
3. firstFunction() returnează și imprimă „Hello from firstFunction” pe consolă.
4. firstFunction() este scos din stivă.
5. Ordinea de execuție trece apoi la secondFunction().
6. secondFunction() revine și tipărește „Sfârșitul de la funcția a doua” pe consolă.
7. secondFunction() este scoasă din stivă, ștergând memoria.

Ce cauzează o revărsare a stivei?

O depășire a stivei apare atunci când există o funcție recursivă (o funcție care se numește singură) fără un punct de ieșire. Browserul (mediul de găzduire) are un apel de stivă maxim pe care îl poate primi înainte de a arunca o eroare de stivă.

Iată un exemplu:

function callMyself(){
  callMyself();
}

callMyself();

callMyself() va rula până când browserul lansează o „Dimensiune maximă a apelului depășită”. Și acesta este un exces de stivă.

1612100586 853 Pila de apeluri JavaScript Ce este si de ce
Eroare maximă a stivei de apeluri

În concluzie

Tastele cheie din pila de apeluri sunt:
1. Este cu un singur fir. Adică nu poate face decât un singur lucru odată.
2. Executarea codului este sincronă.
3. O invocare a funcției creează un cadru de stivă care ocupă o memorie temporară.
4. Funcționează ca o structură de date LIFO – Last In, First Out.

Am folosit articolul stivei de apeluri pentru a pune bazele unei serii pe care o vom analiza pe JavaScript asincron (pe care o vom analiza în alt articol).

Toate exemplele de coduri pot fi găsite în acest GitHub repo.

Mulțumesc că ai citit. Dacă acest articol a fost de ajutor, vă rugăm să-i dați câteva aplauze? astfel încât alții o pot găsi. Vreau să vă citesc și comentariile.