Comprender el contexto de ejecución en JavaScript
En JavaScript, un contexto de ejecución es un entorno en el que se evalúa y ejecuta el código. Es un concepto fundamental que ayuda a gestionar el alcance y el comportamiento de las variables y funciones.
Tipos de contexto de ejecución
Existen tres tipos principales de contextos de ejecución en JavaScript:
- Contexto de ejecución global: este es el contexto predeterminado en el que el código comienza a ejecutarse. Crea un objeto global (por ejemplo,
window
en los navegadores) y configura el alcance global. - Contexto de ejecución de función: se crea siempre que se invoca una función. Cada función tiene su propio contexto de ejecución.
- Contexto de ejecución de evaluación: se crea cuando el código se ejecuta dentro de la función
eval
.
Fases de Ejecución Contexto
Cada contexto de ejecución pasa por dos fases:
1 . Fase de creación: en esta fase, el motor de JavaScript configura el entorno para que se ejecute el código. Implica:
- Crear el enlace
this
. - Configurar la cadena de alcance.
- Crear el objeto variable (variables, funciones y argumentos).
2 . Fase de ejecución: en esta fase, el motor de JavaScript ejecuta el código línea por línea.
Ejemplo de contexto de ejecución
A continuación se muestra un ejemplo para ilustrar cómo funcionan los contextos de ejecución:
var globalVar = "Soy una variable global";
function outerFunction() {
var outerVar = "Soy una variable externa";
function innerFunction() {
var innerVar = "Soy una variable interna";
console.log(globalVar); // Accede a la variable global
console.log(outerVar); // Acceder a la variable externa
console.log(innerVar); // Accede a la variable interna
}
innerFunction();
}
outerFunction();
Salida:
Soy una variable global
Soy una variable externa
Soy una variable interna
Explicación del ejemplo de contexto de ejecución
1 . Contexto de ejecución global:
- Se crea
globalVar
y se le asigna el valor "Soy una variable global". - Se crea
outerFunction
y se almacena en memoria.
2 . Contexto de ejecución de función (outerFunction):
- Se crea
outerVar
y se le asigna el valor "Soy una variable externa". - Se crea
innerFunction
y se almacena en memoria.
3 . Contexto de ejecución de función (innerFunction):
- Se crea
innerVar
y se le asigna el valor "Soy una variable interna". - Las sentencias
console.log
acceden a las variables desde sus respectivos ámbitos.
Cadena de alcance y entorno léxico
La cadena de alcance es una lista de todos los objetos variables a los que tiene acceso el código que se está ejecutando actualmente. El entorno léxico es el entorno en el que se escribe el código y determina la cadena de alcance.
Ejemplo de cadena de alcance
var a = 10;
function foo() {
var b = 20;
function bar() {
var c = 30;
console.log(a + b + c); // Accede a variables de todos los ámbitos.
}
bar();
}
foo();
Salida:
60
Explicación del ejemplo de cadena de alcance
- Ámbito global: contiene
a
. - Ámbito de función (foo): contiene
b
y tiene acceso aa
. - Ámbito de función (bar): contiene
c
y tiene acceso aa
yb
.
Elevación
La elevación es un comportamiento en JavaScript donde las declaraciones de variables y funciones se mueven a la parte superior de su ámbito contenedor durante la fase de creación.
Ejemplo de elevación
console.log(hoistedVar); // Salida: undefined
var hoistedVar = "Estoy levantado";
hoistedFunction(); // Salida: Soy una función elevada
function hoistedFunction() {
console.log("Soy una función elevada");
}
Explicación del ejemplo de elevación
hoistedVar
se declara pero no se inicializa durante la fase de creación, por lo que es "indefinido" cuando se accede a él.hoistedFunction
está completamente izado y puede ser llamado antes de su declaración.