Come funziona JavaScript dietro le quinte?

Andiamo più in profondità e comprendiamo l'esecuzione di JavaScript all'interno del motore del browser:

Come tutti sappiamo, JavaScript è un linguaggio di programmazione a thread singolo di alto livello, basato su prototipi, orientato agli oggetti, interpretato o compilato just-in-time, con funzioni di prima classe e un modello di concorrenza del ciclo di eventi non bloccante.

E sta diventando sempre più popolare giorno dopo giorno, questo articolo ha lo scopo di approfondire JavaScript e come funziona davvero.

Panoramica

Questo post sul blog è adatto ai principianti e utile anche per gli sviluppatori JS esperti.
Esamineremo tutti questi concetti in dettaglio e spiegheremo come funziona effettivamente JavaScript.

In questo post, discuteremo il contesto di esecuzione (fase di creazione della memoria e fase di esecuzione del codice), l'esecuzione di CallStack e il motore JavaScript e il suo ambiente di runtime. Inoltre, comprendi il concetto di ciclo di eventi e flusso di stack.

Questa sarà una panoramica dettagliata di tutti i componenti principali coinvolti nell'esecuzione dello script.
Qui discuteremo i seguenti componenti:

1. Motore JavaScript.
2. Ambiente runtime JavaScript.
3. Contesto di esecuzione.
4. Esecuzione dello stack di chiamate e flusso dello stack.
5. Ciclo di eventi.

Come avrai già sentito, JavaScript è un linguaggio di programmazione interpretato . Significa che il codice sorgente non viene compilato in codice binario prima dell'esecuzione.
Ciò significa che viene eseguito riga per riga, ma non è vero al 100%.
JS è un linguaggio compilato just in time (JIT), questo comportamento moderno lo rende veloce nelle applicazioni web, altrimenti, come per tipo interpretato, rende l'applicazione lenta da rendere. Quindi consideriamo JS un linguaggio di compilazione Just-in-time (JIT).

Il motore JavaScript è semplicemente un programma per computer che esegue codice JavaScript. I motori JavaScript sono oggi integrati in tutti i browser moderni.

Come: (Pochi motori lo sono)
# V8 è il motore JavaScript per Chrome.
# Scimmia ragno per Mozilla Firefox.
# Chakra per Microsoft Edge.
# Core JavaScript per Safari e così via.

Come sappiamo, il motore del browser Chrome "V8" è molto popolare per JavaScript, è
costituito da due componenti principali:
1: Call Stack ( discutere più avanti in dettaglio, sii paziente .. )
2: Heap : è uno spazio di memoria non strutturato in cui sono presenti tutti gli oggetti utili immagazzinato.

L'ambiente runtime JavaScript (JRE):

Come abbiamo discusso sul motore JS, ma il motore JS funziona all'interno di JRE insieme ad altri componenti. come alcune richieste e chiamate asincrone.
I componenti sono elencati come:

1. Motore JS
2. API web
3. Coda di richiamata o coda di messaggi
4. Ciclo di eventi

Quando viene eseguito il codice JS, viene creato un contesto di esecuzione globale (GEC) .
Questa esecuzione viene creata in 2 fasi:
1: fase di creazione della memoria e
2: fase di esecuzione del codice.

Facciamo un esempio;

Per questo frammento di codice sopra, in
primo luogo, viene creato GEC e in cui viene creata la fase di memoria e viene assegnato un valore non definito per tutte le variabili e viene inserito l'intero blocco funzione {} come valore fnxn nel suo spazio di memoria.

In secondo luogo, ora nella seconda fase, ovvero la fase di esecuzione del codice, inizia a esaminare l'intero codice riga per riga.
E ha trovato var a = 3, quindi assegna 3 a una variabile che era indefinita ,
passa alla riga successiva e assegna 4 a b variabile che non era definita. Ora passa alla riga successiva per la funzione add(), non c'è nulla da eseguire, quindi rimane uguale e passa alla riga successiva per var c.

A questa riga, viene creato un nuovo contesto di esecuzione, nome come contesto di esecuzione locale per la funzione add(3,4), ora di nuovo 2 fasi create,
Per la fase di creazione della memoria , assegna undefined per le variabili num1, num2 e risultato. Quindi, nella fase di esecuzione del codice , inizia riga per riga nel blocco funzione {} di add().
Ha trovato assegnare 3 per num1 e 4 per num2,
quindi per var result = num1+num2 e assegnare 7 come nella variabile risultato.
Dopo il risultato restituito, il controllo dell'esecuzione torna alla riga 9 in
var c = 7.

Quando viene incontrata la parola chiave return , restituisce il controllo alla riga chiamata e anche il contesto di esecuzione della funzione viene eliminato.
Passa alla riga successiva, riga 10: consola il valore di c.

Questo è il modo in cui il contesto di esecuzione funziona davvero dietro le quinte.

Javascript gestisce la creazione e l'eliminazione del contesto di esecuzione del codice con l'aiuto di Call Stack ( discuteremo più avanti sullo stack di chiamate )

Pila di chiamate:

Call Stack mantiene l'ordine di esecuzione dei contesti di esecuzione . È anche noto come stack di programma, stack di controllo, stack di runtime, stack di macchine, stack di contesto di esecuzione.
E sappiamo che JS è un linguaggio di programmazione a thread singolo , significa che ha un singolo stack ed esegue una riga alla volta.

Basta prendere il riferimento al codice sopra e spiegare come funziona lo stack di chiamate per lo stesso frammento di codice.

Qui, GEC è stato creato e rientra nello stack, quindi il successivo contesto di esecuzione locale viene inserito nello stack, quindi dopo l'esecuzione viene visualizzato e riportato in GEC.
Quindi console.log (c) viene inserito e dopo l'esecuzione viene visualizzato, quindi ritorna a GEC,
dopo che l'esecuzione è stata completata, anche GEC viene visualizzato dallo stack e lo stack diventa vuoto come condizione IDLE.

Ciclo di eventi:

Il linguaggio JavaScript può anche essere visto in due modi: sincrono e asincrono.

In JS sincrono, il codice viene eseguito riga per riga, il che significa in modo sequenziale, e
in JS asincrono, nulla è sequenziale, il che significa che una riga di codici verrà ignorata ed eseguita successivamente secondo un comportamento noto principalmente come API web.

Quindi il ciclo di eventi viene utilizzato per gestire la parte asincrona con la coda di richiamata e attendere che lo stack si svuoti, quindi inviarlo allo stack per l'esecuzione.

Event Loop è una funzionalità in JS che controlla continuamente se lo stack principale è vuoto. E quando è vuoto, controlla la coda di richiamata. Se ci sono codici nella coda da eseguire, vengono trasferiti uno per uno allo stack di chiamate. Dopo che il codice è stato eseguito, lascia lo stack e il successivo nella coda arriva finché la coda non è vuota.

Ragazzi, concludiamo le cose e ci vediamo nei prossimi post……….