TLDR
O JavaScript possui escopo e fechamentos lexicais (também chamados estáticos). Isso significa que você pode dizer o escopo de um identificador olhando o código-fonte.
Os quatro escopos são:
- Global - visível por tudo
- Função - visível dentro de uma função (e suas subfunções e blocos)
- Bloco - visível dentro de um bloco (e seus sub-blocos)
- Módulo - visível dentro de um módulo
Fora dos casos especiais do escopo global e do módulo, as variáveis são declaradas usando var(escopo da função), let(escopo do bloco) e const(escopo do bloco). A maioria das outras formas de declaração de identificador tem escopo de bloco no modo estrito.
Visão geral
Escopo é a região da base de código sobre a qual um identificador é válido.
Um ambiente lexical é um mapeamento entre nomes de identificadores e os valores associados a eles.
O escopo é formado por um aninhamento vinculado de ambientes lexicais, com cada nível no aninhamento correspondendo a um ambiente lexical de um contexto de execução ancestral.
Esses ambientes lexicais vinculados formam um escopo "cadeia". A resolução do identificador é o processo de busca ao longo dessa cadeia por um identificador correspondente.
A resolução do identificador ocorre apenas em uma direção: para o exterior. Dessa maneira, os ambientes lexicais externos não podem "ver" os ambientes lexicais internos.
Existem três fatores pertinentes para decidir o escopo de um identificador em JavaScript:
- Como um identificador foi declarado
- Onde um identificador foi declarado
- Se você está no modo estrito ou não estrito
Algumas das maneiras pelas quais os identificadores podem ser declarados:
var, leteconst- Parâmetros da função
- Parâmetro do bloco de captura
- Declarações de função
- Expressões de funções nomeadas
- Propriedades implicitamente definidas no objeto global (isto é, falta
varno modo não estrito)
import afirmaçõeseval
Alguns dos identificadores de locais podem ser declarados:
- Contexto global
- Corpo da função
- Bloco ordinário
- O topo de uma estrutura de controle (por exemplo, loop, if, while etc)
- Corpo da estrutura de controle
- Módulos
Estilos de declaração
var
Identificadores declarados usando var têm escopo de função , além de quando são declarados diretamente no contexto global; nesse caso, eles são adicionados como propriedades no objeto global e têm escopo global. Existem regras separadas para seu uso em evalfunções.
deixe e const
Identificadores declarados usando lete const têm escopo de bloco , exceto quando são declarados diretamente no contexto global; nesse caso, eles têm escopo global.
Nota: let, conste var estão todos içada . Isso significa que sua posição lógica de definição é a parte superior de seu escopo (bloco ou função). No entanto, as variáveis declaradas estão sendo usadas lete constnão podem ser lidas ou atribuídas até que o controle tenha passado o ponto de declaração no código-fonte. O período intermediário é conhecido como zona morta temporal.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Nomes de parâmetros de função
Os nomes de parâmetros da função têm escopo definido para o corpo da função. Observe que há uma leve complexidade nisso. As funções declaradas como argumentos padrão fecham-se sobre a lista de parâmetros , e não o corpo da função.
Declarações de função
As declarações de função têm escopo de bloco no modo estrito e escopo de função no modo não estrito. Nota: o modo não estrito é um conjunto complicado de regras emergentes com base nas implementações históricas peculiares de diferentes navegadores.
Expressões de funções nomeadas
As expressões de funções nomeadas têm um escopo definido para elas mesmas (por exemplo, para fins de recursão).
Propriedades definidas implicitamente no objeto global
No modo não estrito, as propriedades implicitamente definidas no objeto global têm escopo global, porque o objeto global fica na parte superior da cadeia de escopo. No modo estrito, isso não é permitido.
avaliação
Nas evalcadeias, as variáveis declaradas usando varserão colocadas no escopo atual ou, se evalusadas indiretamente, como propriedades no objeto global.
Exemplos
A seguir irá lançar uma ReferenceError porque os nomes x, ye znão têm nenhum significado fora da função f.
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
A seguir, será gerado um ReferenceError para ye z, mas não para x, porque a visibilidade de xnão é restringida pelo bloco. Blocos que definem os corpos de estruturas de controle como if, fore while, se comportam de forma semelhante.
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
A seguir, xé visível fora do loop porque varpossui o escopo da função:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... por causa desse comportamento, você precisa ter cuidado ao fechar as variáveis declaradas usando varloops. Há apenas uma instância da variável xdeclarada aqui e ela fica logicamente fora do loop.
As seguintes impressões são impressas 5cinco vezes e depois são impressas 5pela sexta vez pela parte console.logexterna do loop:
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
A seguinte impressão é impressa undefinedporque xtem escopo de bloco. Os retornos de chamada são executados um por um assincronamente. Novo comportamento de letmeios variáveis que cada função anônima fechada sobre uma variável diferente chamada x(ao contrário do que teria feito com var), e assim inteiros 0através 4são impressos .:
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
O seguinte NÃO lançará a ReferenceErrorporque a visibilidade de xnão é restringida pelo bloco; no entanto, ela será impressa undefinedporque a variável não foi inicializada (devido à ifinstrução).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Uma variável declarada na parte superior de um forloop usando lettem o escopo definido para o corpo do loop:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
A seguir, será gerado um ReferenceErrorporque a visibilidade de xé restringida pelo bloco:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Variáveis declaradas usando var, letou consttodos com escopo definido para módulos:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
A seguir, declararemos uma propriedade no objeto global, porque as variáveis declaradas usando vardentro do contexto global são adicionadas como propriedades ao objeto global:
var x = 1
console.log(window.hasOwnProperty('x')) // true
lete constno contexto global não adicione propriedades ao objeto global, mas ainda tenha escopo global:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Os parâmetros de função podem ser considerados declarados no corpo da função:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Os parâmetros do bloco de captura têm escopo definido para o corpo do bloco de captura:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
As expressões de função nomeadas têm escopo definido apenas para a própria expressão:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
No modo não estrito, as propriedades definidas implicitamente no objeto global têm escopo global. No modo estrito, você recebe um erro.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
No modo não estrito, as declarações de função têm escopo de função. No modo estrito, eles têm escopo de bloco.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Como funciona sob o capô
Escopo é definido como a região lexical do código sobre a qual um identificador é válido.
No JavaScript, todo objeto de função possui uma [[Environment]]referência oculta que é uma referência ao ambiente lexical do contexto de execução (quadro da pilha) no qual foi criado.
Quando você invoca uma função, o [[Call]]método oculto é chamado. Este método cria um novo contexto de execução e estabelece um link entre o novo contexto de execução e o ambiente lexical do objeto de função. Isso é feito copiando o [[Environment]]valor no objeto de função, para um campo de referência externo no ambiente lexical do novo contexto de execução.
Observe que esse link entre o novo contexto de execução e o ambiente lexical do objeto de função é chamado de fechamento .
Assim, em JavaScript, o escopo é implementado através de ambientes lexicais vinculados em uma "cadeia" por referências externas. Essa cadeia de ambientes lexicais é chamada cadeia de escopo, e a resolução do identificador ocorre pesquisando-se na cadeia por um identificador correspondente.
Saiba mais .
