TLDR
JavaScript tiene ámbitos y cierres léxicos (también llamados estáticos). Esto significa que puede determinar el alcance de un identificador mirando el código fuente.
Los cuatro ámbitos son:
- Global: visible por todo
- Función: visible dentro de una función (y sus subfunciones y bloques)
- Bloque: visible dentro de un bloque (y sus subbloques)
- Módulo: visible dentro de un módulo
Fuera de los casos especiales de alcance global y de módulo, las variables se declaran usando var(alcance de función), let(alcance de bloque) yconst (alcance de bloque). La mayoría de las otras formas de declaración de identificador tienen alcance de bloque en modo estricto.
Visión general
El alcance es la región de la base de código sobre la cual un identificador es válido.
Un entorno léxico es un mapeo entre los nombres de los identificadores y los valores asociados con ellos.
El alcance está formado por una anidación vinculada de entornos léxicos, con cada nivel en la anidación correspondiente a un entorno léxico de un contexto de ejecución ancestral.
Estos entornos léxicos vinculados forman una "cadena" de alcance. La resolución del identificador es el proceso de búsqueda a lo largo de esta cadena de un identificador coincidente.
La resolución del identificador solo ocurre en una dirección: hacia afuera. De esta manera, los ambientes léxicos externos no pueden "ver" los ambientes léxicos internos.
Hay tres factores pertinentes para decidir el alcance de un identificador en JavaScript:
- Cómo se declaró un identificador
- Donde se declaró un identificador
- Si está en modo estricto o no estricto
Algunas de las formas en que se pueden declarar los identificadores:
var, letyconst- Parámetros de la función
- Capturar parámetro de bloque
- Declaraciones de funciones
- Expresiones de funciones nombradas
- Propiedades definidas implícitamente en el objeto global (es decir, perderse
varen modo no estricto)
import declaracioneseval
Se pueden declarar algunos de los identificadores de ubicaciones:
- Contexto global
- Cuerpo de la función
- Bloque ordinario
- La parte superior de una estructura de control (por ejemplo, bucle, if, while, etc.)
- Estructura de control del cuerpo
- Módulos
Estilos de declaración
var
Los identificadores declarados usando var tienen un alcance de función , aparte de cuando se declaran directamente en el contexto global, en cuyo caso se agregan como propiedades en el objeto global y tienen un alcance global. Hay reglas separadas para su uso eneval funciones.
dejar y const
Identificadores declarados usando lety const tienen alcance de bloque , aparte de cuando se declaran directamente en el contexto global, en cuyo caso tienen alcance global.
Nota: let, consty var están todos izada . Esto significa que su posición lógica de definición es la parte superior de su alcance (bloque o función). Sin embargo, las variables declararon su uso lety constno pueden leerse ni asignarse hasta que el control haya pasado el punto de declaración en el código fuente. El período intermedio se conoce como la zona muerta temporal.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Nombres de parámetros de funciones
Los nombres de los parámetros de la función están dentro del ámbito de la función. Tenga en cuenta que hay una ligera complejidad en esto. Las funciones declaradas como argumentos predeterminados se cierran sobre la lista de parámetros y no el cuerpo de la función.
Declaraciones de funciones
Las declaraciones de función tienen alcance de bloque en modo estricto y alcance de función en modo no estricto. Nota: el modo no estricto es un conjunto complicado de reglas emergentes basadas en las extravagantes implementaciones históricas de diferentes navegadores.
Expresiones de funciones nombradas
Las expresiones de funciones con nombre tienen un alcance propio (p. Ej., Para fines de recursión).
Propiedades definidas implícitamente en el objeto global
En el modo no estricto, las propiedades definidas implícitamente en el objeto global tienen alcance global, porque el objeto global se encuentra en la parte superior de la cadena de alcance. En modo estricto, estos no están permitidos.
eval
En las evalcadenas, las variables declaradas usando varse colocarán en el alcance actual o, si evalse usa indirectamente, como propiedades en el objeto global.
Ejemplos
Lo siguiente arrojará un ReferenceError porque los nombres x, yy zno tienen significado fuera de la función 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)
Lo siguiente arrojará un ReferenceError para yy z, pero no para x, porque la visibilidad de xno está limitada por el bloque. Los bloques que definen los cuerpos de las estructuras de control como if, fory while, se comportan de manera similar.
{
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 continuación, xes visible fuera del bucle porque vartiene alcance de función:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... debido a este comportamiento, debe tener cuidado al cerrar las variables declaradas mediante varbucles. Solo hay una instancia de variablex declara , y se ubica lógicamente fuera del bucle.
Las siguientes impresiones 5, cinco veces, y luego imprime 5por sexta vez para el console.logexterior del bucle:
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
Lo siguiente se imprime undefinedporque xtiene un alcance de bloque. Las devoluciones de llamada se ejecutan una por una de forma asincrónica. Nuevo comportamiento de letlos medios de variables que cada función anónima se cerró sobre una variable diferente llamado x(a diferencia de lo habría hecho con var), y así los números enteros 0a través de 4se imprimen .:
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
Lo siguiente NO arrojará un ReferenceErrorporque la visibilidad de xno está limitada por el bloque; sin embargo, se imprimirá undefinedporque la variable no se ha inicializado (debido a la ifdeclaración).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Una variable declarada en la parte superior de un forbucle que se usa letse limita al cuerpo del bucle:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Lo siguiente arrojará un ReferenceErrorporque la visibilidad de xestá limitada por el bloque:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Las variables declaradas usando var, leto constestán en el ámbito de los módulos:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Lo siguiente declarará una propiedad en el objeto global, porque las variables declaradas usando vardentro del contexto global, se agregan como propiedades al objeto global:
var x = 1
console.log(window.hasOwnProperty('x')) // true
lety consten el contexto global no agregue propiedades al objeto global, pero aún tenga alcance global:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Los parámetros de la función pueden considerarse declarados en el cuerpo de la función:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Los parámetros del bloque de captura están sujetos al cuerpo del bloque de captura:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Las expresiones de funciones con nombre solo tienen un alcance para la expresión misma:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
En el modo no estricto, las propiedades definidas implícitamente en el objeto global tienen un alcance global. En modo estricto, obtienes un error.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
En modo no estricto, las declaraciones de función tienen alcance de función. En modo estricto tienen alcance de bloque.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Cómo funciona debajo del capó
El alcance se define como la región léxica del código sobre la cual un identificador es válido.
En JavaScript, cada objeto de función tiene una [[Environment]]referencia oculta que es una referencia al entorno léxico del contexto de ejecución. (marco de pila) dentro del cual se creó.
Cuando invocas una función, [[Call]]se llama al método oculto . Este método crea un nuevo contexto de ejecución y establece un vínculo entre el nuevo contexto de ejecución y el entorno léxico del objeto de función. Lo hace copiando el [[Environment]]valor en el objeto de función, en un campo de referencia externo en el entorno léxico del nuevo contexto de ejecución.
Tenga en cuenta que este vínculo entre el nuevo contexto de ejecución y el entorno léxico del objeto de función se denomina cierre .
Por lo tanto, en JavaScript, el alcance se implementa a través de entornos léxicos unidos en una "cadena" por referencias externas. Esta cadena de entornos léxicos se denomina cadena de alcance, y la resolución del identificador se produce buscando en la cadena un identificador coincidente.
Averiguar más .
