Conceitos
Avançados
t
do JavaScript
O Funcionamento Interno do JS
No JavaScript, o compilador que converte o código considera a
disposição das declarações, sendo essencial a organização das
partes do código. Então, o compilador decide onde o código será
armazenado na memória e como ele interagirá.
Arquivo JS Call Memory
Stack Heap
Parser AST
t
Interpreter
Profiler Compilador Código
otimizado Sua tela
Como o exemplo abaixo, onde variável “greetings”
fica lexicalmente dentro da função sayHello:
Contexto de Execução Global
O contexto global de execução no JavaScript é onde o código
é executado sem estar vinculado a uma função específica.
Contexto de execução global
Objeto
this
Global
Espaço de memória para t
variáveis e funções globais
Funções existentes no contexto global:
Memory Heap: Reserva espaço para variáveis e funções
globais
Objeto Global: Armazena globalmente variáveis e funções
não contidas em funções específicas
"this": A localização varia conforme a execução do código.
- Navegador: Objetos em `window`
- [Link]: Objeto `global`
Contexto de Execução: Hoisting
Hoisting é quando a variável que é declarada em um
escopo local é movida para um escopo superior.
Antes de seguir com o código, é crucial entende-lo!
t
No exemplo a seguir, temos dois cenários:
variáveis declaradas com var e variáveis
declaradas com const. A função foo é chamada
normalmente devido ao hoisting total associado a
funções declaradas com a palavra-chave function.
Contexto de Execução: Hoisting
r, sofre hoisting e pode
mo va O
È definida co antes de ser declarada. ,
ser chamada será undefined, não bar Bar(): N
nte ão p
valor resulta r foi apenas declarada. sintaxe d ode ser executa
pois myVa hoisting e arrow functio da devido á
mas não parcial (A varià n, que tem
a at vel è
foi decla ribuição da funç hoisted,
rad ão,
inicializa a como const e pois bar
da antes n
da cham ão foi
ada).
Tambèm falha porque variàveis inicializadas
usando const não são hoisted, retornando
um ReferenceError.
Dica: O analisador do Javascript configura o espaço de memória para
variáveis e funções, permitindo acesso antes da declaração - Apenas
as declarações, não as inicializações.
Contexto de Execução: Hoisting
Ao substituirmos var por const ou let, evitamos o hoisting
e garantimos que as variáveis só sejam referenciadas
após a declaração. Com essa restrição de hoisting, vamos
precisar mover a declaração das variáveis e das funções
para antes de serem chamadas.
u m a fun ção regular,
m
Transformar e recisar passar como
sp
pois não vamo fu n çã o de primeira
pa ra
argumento va r o valor this de
ou pr es er
ordem terno.
um contexto ex
Contexto de Execução: Invocação
de Função e Call Stack
A chamada de função cria um novo contexto de
execução, e a call stack gerencia a ordem de execução
desses contextos, garantindo eficiência e prevenindo
problemas de estouro de stack. Observe o exemplo:
Durante a execução, "favorita" vira "C#" ao entrar em
"langFavorita()". Este contexto, segue o padrão Last in
First Out, criando e executando o bloco, alocando
memória. "favorita" se transforma em "javascript", e
"outraLinguagem()" é chamada, gerando um novo
contexto no topo da stack.
Contexto de Execução:
Invocação de Função e Call Stack
outraLinguagem()
ExecutionContext favorita
criado e executado indefinida
langFavorita()
t
ExecutionContext
favorita
criado e executado Javascript
Contexto Global
criado e o código
favorita
é executado
C#
Contexto de Execução:
Cadeia de Escopo
No JavaScript, o escopo vai do maior para o menor,
permitindo acesso de variáveis de fora para dentro,
mas não o contrário. Essa é uma técnica conhecida
como cadeias de escopo ou scope chains, e era uma
das formas de criar variáveis privadas antes dos
modificadores de acesso.
Ao executar outroEsporte(), um contexto foi criado,
ativando esporteFavorito(), gerando outro contexto.
Quando [Link](sport) tentou encontrar a variável,
não a encontrou localmente em favoriteSport, então
subiu um nível e a encontrou na stack de cima.
Contexto de Execução:
Cadeia de Escopo
esporteFavorito()
ExecutionContext
criado e executado
Referência
para outro
ambiente
outroEsporte()
Scope
ExecutionContext sport Chain
criado e executado vôlei
Referência
para outro
ambiente
t
Contexto Global
criado e o código é
executado sport
basquete
No exemplo. esporteFavorito() não está posicionado
lexicamente na função otherSport, mas em nível global.
Como resultado, o seu ambiente externo é global e a
variável “sport” encontrada foi a que existe no contexto
de execução global, registrando, portanto, “volei”.