Como o JavaScript funciona nos bastidores?
Vamos nos aprofundar e entender a execução do JavaScript dentro do mecanismo do navegador:
Como todos sabemos, JavaScript é uma linguagem de programação single-thread de alto nível, baseada em protótipo, orientada a objetos, interpretada ou compilada just-in-time, com funções de primeira classe e um modelo de simultaneidade de loop de eventos sem bloqueio.
E está ficando cada vez mais popular a cada dia. Este artigo tem como objetivo aprofundar o JavaScript e como ele realmente funciona.
Visão geral
Esta postagem no blog é amigável para iniciantes e também útil para desenvolvedores JS experientes.
Analisaremos todos esses conceitos em detalhes e explicaremos como o JavaScript realmente é executado.
Nesta postagem, discutiremos o contexto de execução (fase de criação de memória e fase de execução de código), execução de CallStack e mecanismo JavaScript e seu ambiente de tempo de execução. Além disso, entenda o conceito de loop de eventos e fluxo de pilha.
Esta será uma visão geral de todos os principais componentes envolvidos na execução do script.
Aqui vamos discutir os seguintes componentes:
- Mecanismo JavaScript.
- Ambiente de tempo de execução JavaScript.
- Contexto de Execução.
- Execução de pilha de chamada e fluxo de pilha.
- Circuito de eventos.
Como você pode ouvir antes, JavaScript é uma linguagem de programação interpretada . Isso significa que o código-fonte não é compilado em código binário antes da execução.
Isso significa que ele executa linha por linha, mas não é 100% verdadeiro.
JS é uma linguagem compilada just in time (JIT), esse comportamento moderno o torna rápido em aplicativos da web, caso contrário, conforme o tipo interpretado, torna o aplicativo lento para renderizar. Portanto, consideramos JS uma linguagem de compilação Just-in-time (JIT).
![](https://post.nghiatu.com/assets/images/m/max/724/1*OgVJx-aUIQVbes8heDbiFQ.jpeg)
O mecanismo JavaScript é simplesmente um programa de computador que executa o código JavaScript. Os mecanismos JavaScript estão embutidos em todos os navegadores modernos hoje.
Como: (Poucos mecanismos são)
# V8 é o mecanismo JavaScript para Chrome.
# Macaco-aranha para Mozilla Firefox.
# Chakra para Microsoft Edge.
# Núcleo JavaScript para Safari e assim por diante.
Como sabemos, o mecanismo do navegador Chrome "V8" é muito popular para JavaScript.
Ele consiste em dois componentes principais:
1: Call Stack ( discutir mais tarde em detalhes, fique atento. )
2: Heap : É um espaço de memória não estruturado onde todos os objetos úteis são armazenado.
![](https://post.nghiatu.com/assets/images/m/max/724/1*MPpDyUYWjnIPSANiytzSgQ.jpeg)
Tha JavaScript Runtime Environment (JRE):
Conforme discutimos sobre o mecanismo JS, mas o mecanismo JS é executado dentro do JRE junto com alguns outros componentes. como algumas solicitações e chamadas assíncronas.
Os componentes são listados como:
- Motor JS
- APIs da Web
- Fila de retorno de chamada ou fila de mensagens
- Loop de eventos
![](https://post.nghiatu.com/assets/images/m/max/724/1*2pvuAqCektZ7gwzUXyCeDw.png)
Quando o código JS é executado, um contexto de execução global (GEC) é criado.
Esta execução é criada em 2 fases:
1: Fase de criação de memória e
2: Fase de execução de código.
Vamos dar um exemplo;
![](https://post.nghiatu.com/assets/images/m/max/724/1*jmL_NCGEYYavsVLp0JJ5Pg.png)
Para este trecho de código acima,
primeiro, o GEC é criado e no qual a fase de memória é criada e atribui um valor indefinido para todas as variáveis e coloca todo o bloco de funções {} como valor fnxn em seu espaço de memória.
Em segundo lugar, agora na 2ª fase, ou seja, na fase de execução do código, ele começa a percorrer todo o código linha por linha.
E encontrou var a = 3, então atribuiu 3 a uma variável que estava indefinida e
moveu para a próxima linha e atribuiu 4 à variável b que estava indefinida. Agora vá para a próxima linha para a função add(), não há nada para executar, então ela permanece a mesma e vá para a próxima linha para var c.
![](https://post.nghiatu.com/assets/images/m/max/724/1*44vopVz_63zjeJPWVZ6jFw.png)
Nesta linha, um novo contexto de execução é criado, nome como contexto de execução local para a função add(3,4), agora novamente 2 fases criadas,
Para a fase de criação de memória , atribui indefinido para as variáveis num1, num2 e resultado. Em seguida, na fase de execução do código , inicia-se linha por linha no bloco funcional { } de add().
Encontrou atribuir 3 para num1 e 4 para num2,
E então para var result = num1+num2, e atribuir 7 como na variável de resultado.
Após esse resultado de retorno, o controle da execução volta para a linha 9 em
var c = 7.
Quando a palavra-chave return é encontrada, ela retorna o controle para a linha chamada e também o contexto de execução da função é excluído.
Move-se para a próxima linha, linha 10: consola o valor de c.
É assim que o contexto de execução realmente funciona nos bastidores.
O Javascript gerencia a criação e exclusão do contexto de execução do código com a ajuda do Call Stack ( discutiremos mais tarde sobre o call stack )
Pilha de chamada:
Call Stack mantém a ordem de execução dos contextos de execução . Também é conhecido como Pilha de Programa, Pilha de Controle, Pilha de Tempo de Execução, Pilha de Máquina, Pilha de Contexto de Execução.
E sabemos que JS é uma linguagem de programação de thread único , significa ter uma única pilha e executar uma linha por vez.
Apenas pegando a referência de código acima e explicando como a pilha de chamadas funciona para o mesmo trecho de código.
![](https://post.nghiatu.com/assets/images/m/max/724/1*oABMUyzNIepmEPFdAx40KQ.png)
Aqui, o GEC foi criado e caiu na pilha, então o próximo contexto de execução local é pop-in para a pilha e, após a execução, ele sai e volta para o GEC.
Em seguida, o console.log(c) é exibido e, após a execução, é exibido e, em seguida, retorna ao GEC.
Depois que a execução é concluída, o GEC também é removido da pilha e a pilha fica vazia como uma condição IDLE.
Circuito de eventos:
A linguagem JavaScript também pode ser vista de duas maneiras — síncrona e assíncrona.
No JS síncrono, o código é executado linha por linha, o que significa de maneira sequencial, e
no JS assíncrono, nada é sequencial, o que significa que uma linha de códigos será ignorada e executada posteriormente de acordo com o comportamento conhecido principalmente como APIs da web.
Portanto, o loop de eventos é usado para lidar com a parte assíncrona com a fila de retorno de chamada e aguardar a pilha esvaziar e, em seguida, enviar para a pilha para execução.
![](https://post.nghiatu.com/assets/images/m/max/724/1*HwgMN_Rgbg6wdK1LkPmI0Q.png)
Event Loop é um recurso em JS que verifica continuamente se a pilha principal está vazia. E quando está vazio, verifica a Fila de Callback. Se houver códigos na fila para serem executados, eles são transferidos um a um para a pilha de chamadas. Depois que o código é executado, ele sai da pilha e o próximo da fila sobe até que a fila fique vazia.
Pessoal, vamos encerrar as coisas e ver vocês nos próximos posts……….