Post Top Ad

Your Ad Spot

domingo, 28 de junio de 2020

¿Cómo funcionan realmente las variables globales de JavaScript?

En esta publicación de blog, examinamos cómo funcionan las variables globales de JavaScript. Varios fenómenos interesantes juegan un papel: el alcance de los scripts, el llamado objeto global y más.

Ámbitos   

El alcance léxico (corto: alcance ) de una variable es la región de un programa donde se puede acceder. Los ámbitos de JavaScript son estáticos (no cambian en tiempo de ejecución) y se pueden anidar, por ejemplo:
function func() { // (A)
  const foo = 1;
  if (true) { // (B)
    const bar = 2;
  }
}
El alcance introducido por la ifdeclaración (línea B) está anidado dentro del alcance de la función func()(línea A).
El alcance circundante más interno de un alcance S se llama alcance externo de S. En el ejemplo, funces el alcance externo de if.

Entornos léxicos   

En la especificación del lenguaje JavaScript, los ámbitos se "implementan" a través de entornos léxicos . Se componen de dos componentes:
  • Un registro de entorno (diccionario de ideas) que asigna nombres de variables a valores de variables. Aquí es donde JavaScript almacena las variables. Una entrada de valor clave en el registro de entorno se denomina enlace .
  • Una referencia al entorno externo : el entorno que representa el alcance externo del alcance representado por el entorno actual.
Por lo tanto, el árbol de ámbitos anidados está representado por un árbol de entornos anidados, vinculado por referencias externas .

El objeto global   

El objeto global es un objeto cuyas propiedades son variables globales. (Pronto examinaremos cómo encaja exactamente en el árbol de entornos). Tiene varios nombres diferentes:
  • En todas partes ( característica propuesta ):globalThis
  • Otros nombres para el objeto global dependen de la plataforma y la construcción del lenguaje:
    • window: es la forma clásica de referirse al objeto global. Pero solo funciona en el código normal del navegador; no en Node.js ni en Web Workers (procesos que se ejecutan simultáneamente con el código normal del navegador).
    • self: está disponible en todos los navegadores, incluso en Web Workers. Pero no es compatible con Node.js.
    • global: solo está disponible en Node.js.
El objeto global contiene todas las variables globales integradas.

El entorno global   

El alcance global es el alcance “más externo”: no tiene alcance externo. Su entorno es el entorno global . Cada entorno está conectado con el entorno global a través de una cadena de entornos que están vinculados por referencias externas. La referencia externa del entorno global es null.
El entorno global combina dos registros de entorno:
  • Un registro de entorno de objeto que funciona como un registro de entorno normal, pero mantiene sus enlaces sincronizados con un objeto. En este caso, el objeto es el objeto global.
  • Un registro de entorno normal ( declarativo ).
El siguiente diagrama muestra estas estructuras de datos. El alcance del script y los entornos del módulo se explican pronto.
Las siguientes dos subsecciones explican cómo se combinan el registro del objeto y el registro declarativo.

Creando variables   

Para crear una variable que sea verdaderamente global, debe tener un alcance global, que es solo el caso en el nivel superior de los scripts:
  • Nivel superior constletclasscrear enlaces en el registro declarativo.
  • Las vardeclaraciones de nivel superior y de función crean enlaces en el registro del objeto.
<script>
  const one = 1;
  var two = 2;
</script>
<script>
  // All scripts share the same top-level scope:
  console.log(one); // 1
  console.log(two); // 2
  
  // Not all declarations create properties of the global object:
  console.log(window.one); // undefined
  console.log(window.two); // 2
</script>
Además, el objeto global contiene todas las variables globales integradas y las contribuye al entorno global a través del registro de objetos.

Obtener o establecer variables   

Cuando obtenemos o establecemos una variable y ambos registros de entorno tienen un enlace para esa variable, entonces el registro declarativo gana:
<script>
  let foo = 1; // declarative environment record
  globalThis.foo = 2; // object environment record

  console.log(foo); // 1 (declarative record wins)
  console.log(globalThis.foo); // 2
</script>

Entornos de módulo   

Cada módulo tiene su propio entorno. Almacena todas las declaraciones de nivel superior, incluidas las importaciones. El entorno externo de un entorno de módulo es el entorno global.

Conclusión: ¿Por qué JavaScript tiene variables globales normales y el objeto global?  

El objeto global generalmente se considera un error. Por esa razón, las construcciones más nuevas como constlety clases crean variables globales normales (cuando están en el alcance del script).
Afortunadamente, la mayor parte del código escrito en JavaScript moderno, reside en módulos ECMAScript y módulos CommonJS . Cada módulo tiene su propio alcance, por lo que las reglas que rigen las variables globales rara vez importan para el código basado en módulos.

Lectura adicional   

  • Publicación de blog "Propuesta ES: globalThis"
  • Secta. "Entornos léxicos" en la especificación ECMAScript proporciona una visión general sobre los entornos.
  • Secta. "Registros del medio ambiente mundial " cubre el medio ambiente mundial.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas