Javascript Avanzado en Español
  • Introducción
  • I- Up & Going
    • 0- Prefacio
    • 1- En la programación
      • 1.1 Código
      • 1.2 Inténtalo tú mismo
      • 1.3 Operadores
      • 1.4 Valores y Tipos
      • 1.5 Comentarios del Código
      • 1.6 Variables
      • 1.7 Bloques
      • 1.8 Condicionales
      • 1.9 Bucles
      • 1.10 Funciones
      • 1.11 Scope (Ámbito)
      • 1.12 Práctica
      • 1.13 - Revisión
    • 2- En Javascript
      • 2.1 Valores y Tipos
      • 2.2 Variables
      • 2.3 Condicionales
      • 2.4 Modo estricto
      • 2.5 Funciones como Valores
      • 2.6 Identificador This
      • 2.7 Prototypes
      • 2.8 Lo Viejo y Lo Nuevo
      • 2.9 Non-JavaScript
      • 2.10 Revisión
    • 3- En YDKJS
      • 3.1 Scope & Closures
      • 3.2 This & Object Prototypes
      • 3.3 Tipos & Gramática
      • 3.4 Async & Performance
      • 3.5 ES6 & Más allá
      • 3.6 Revisión
  • II- Scope & Closures
    • 0- Prefacio
    • 1- ¿Qué es el Scope?
      • 1.1 Teoría del Compilador
      • 1.2 Entendiendo el Scope
      • 1.3 Scopes Anidados
      • 1.4 Errores
      • 1.5 Revisión
    • 2- Lexical Scope
      • 2.1 Tiempo de Lex
      • 2.2 Trucos léxicos
      • 2.3 Revisión
    • 3- Function vs. Block Scope
      • 3.1 Ámbito de las funciones
      • 3.2 Ocultación en el ámbito común
      • 3.3 Funciones como ámbitos
      • 3.4 Bloques como ámbitos
      • 3.5 Revisión (TL; DR)
    • 4- Hoisting
      • 4.1 ¿El Huevo o la Gallina?
      • 4.2 El compilador pega de nuevo
      • 4.3 Funciones Primero
      • 4.4 Revisión
    • 5- Scope Closure
      • 5.1 Ilustración
      • 5.2 Nitty Gritty
      • 5.3 Ahora puedo ver
      • 5.4 Loops + Closure
      • 5.5 Módulos
      • 5.6 Revisión
    • 6- Scope Dinámico
    • 7- Ámbito de bloque de Polyfilling
      • 7.1 Traceur
      • 7.2 Bloques implícitos vs. explícitos
      • 7.3 Rendimiento
    • 8- Lexical-this
  • III- this & Object Prototypes
    • 0- Prefacio
    • 1- this o That?
      • 1.1 ¿Porque this?
      • 1.2 Confusiones
      • 1.3 ¿Que es this?
      • 1.4 Revisión
    • 2- this, todo tiene sentido ahora!
      • 2.1 Sitio de llamada
      • 2.2 Nada más que reglas
      • 2.3 Todo en orden
Powered by GitBook
On this page

Was this helpful?

  1. II- Scope & Closures

7- Ámbito de bloque de Polyfilling

En el Capítulo 3, exploramos el Ámbito de Bloque. Vimos que with y la cláusula catch son ejemplos minúsculos de ámbito de bloque que han existido en JavaScript al menos desde la introducción de ES3.

Pero es la introducción de ES6 de let que finalmente brinda capacidad de alcance de bloque completo y sin restricciones a nuestro código. Hay muchas cosas interesantes, tanto funcionales como de estilo de código, que permitirán el alcance de bloque.

Pero, ¿qué pasaría si quisieramos utilizar el ámbito de bloque en los entornos pre-ES6?

Considere este código:

{
    let a = 2;
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

Esto funcionará muy bien en entornos ES6. Pero, ¿podemos hacerlo con las versiones anteriores de ES6? catch es la respuesta.

try{throw 2}catch(a){
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

Whoa! Ese es un código feo, extraño. Vemos un try / catch que parece arrojar un error forzosamente, pero el "error" que lanza es sólo un valor 2, y luego la declaración de variables que lo recibe está en la cláusula catch(a). Mente: explota!.

Así es, la cláusula catch tiene un alcance de bloque, lo que significa que puede usarse como un polyfill para el ámbito de bloque en entornos pre-ES6.

"Pero ...", dices. "... nadie quiere escribir un código así de feo!" Es verdad. Nadie escribe (algunos) el código generado por el compilador de CoffeeScript, tampoco. Ese no es el punto.

El punto es que las herramientas pueden transpilar el código ES6 para trabajar en entornos pre-ES6. Puede escribir código utilizando el ámbito de bloque y beneficiarse de dicha funcionalidad y dejar que una herramienta de creación de pasos se encargue de producir código que funcionará de verdad cuando se implementa.

Éste es realmente el camino de migración preferido para todos (ahem, la mayoría) de ES6: usar un transpilador de código para tomar código ES6 y producir código compatible con ES5 durante la transición de pre-ES6 a ES6.

Previous6- Scope DinámicoNext7.1 Traceur

Last updated 6 years ago

Was this helpful?