ES3 dans le détail

Chaque fois que du code JavaScript est exécuté, nous entrons dans un contexte d'exécution.

Le contexte d'exécution (dont la forme abrégée sera EC pour « execution context ») est un concept abstrait décrit par la spécification ECMA-262-3 pour classifier et différentier différents types de code exécutable.

Ce standard ne définit aucune structure ni aucune déclinaison en terme d'implémentation technique des contextes d'exécution. C'est un problème qui doit être traité par les moteurs qui implémentent le standard.

Pour résumer, un groupe de contexte d'exécution forme une pile (nommée « stack »). Le bas de cette pile est toujours le contexte global (« global context ») alors que le sommet est le contexte d'exécution courant (« active context »). La pile est augmentée (« pushed ») lors de l'entrée dans un contexte d'exécution et diminuée (« popped ») lors de sa sortie.

Le concept de déclinaison de code exécutable est directement lié au concept abstrait de contexte d'exécution. Il y a le code global, le code des fonctions et le code de eval. Voyons cela plus en détail. Nous pouvons définir la pile des contextes d'exécution comme un tableau :

js ECStack = []

La pile est augmentée chaque fois que nous entrons dans une fonction (même si la fonction est appelée récursivement ou en tant que constructeur). Cela est également le cas lors de l'utilisation de la fonction intégrée eval.

II-A. Code global▲

js ECStack = [
    globalContext
]

II-B. Code de fonction▲

(function dream(flag) { 
  if (flag) {
    return; 
  } 
  dream(true); 
})(false)

// première activation de `dream` 
ECStack = [ 
  <dream> functionContext, 
  globalContext ] 
// activation récursive de `dream` 
ECStack = [ 
  <dream> functionContext (récursivement), 
  <dream> functionContext, 
  globalContext 
]

(function chase() { 
  (function hotel() { 
    (function fortress() { 
      throw 'Sort des contextes de `fortress` puis `hotel` puis `chase`'; 
    })();
  })(); 
})();

II-C. Code eval▲

// influence le contexte global 
eval('var x = 10');
(function limbo() {
  // ici, la variable `y` 
  // est créée dans le contexte local 
  // de la fonction `limbo` 
eval('var y = 20');
})();
  alert(x); // `10` 
  alert(y); // y n'est pas défini(e)

ECStack = [ 
  globalContext 
] 

// eval('var x = 10');
ECStack.push({ 
  context: evalContext, 
  callingContext: globalContext 
}) 
// Sortie du contexte `evalContext` 
ECStack.pop()

// appel de la fonction `limbo` 
ECStack.push(<limbo> functionContext); 

// eval('var y = 20'); 
ECStack.push({
  context: evalContext, callingContext: <limbo> functionContext 
})
 
// Sortie du contexte `evalContext` 
ECStack.pop()
 
// sortie de foo 
ECStack.pop()

function reality() {
  var x = 1;
 return function () { alert(x); }; };

var dream = reality(); 
dream(); // `1` 
eval('x = 2', dream); 

// contexte passé et qui influence la variable interne `x` 

dream(); // `2`

Nous avons vu plus haut que le code global s'exécutait au niveau Programme. Cela signifie que le code global est le code qui s'active dès l'entrée dans un script et qui crée le contexte global. Mais dans un navigateur ? Il y a « plusieurs » balises <script>. Font-elles toutes partie d'un même contexte global ?

En réalité, il y a plusieurs contextes globaux exécutés dans un navigateur. Un pour chaque script JavaScript rencontré, qu'il soit dans les balises <script> ou dans un attribut HTML demandant à être analysé en tant que JavaScript.

III-A. Conclusion▲

Nous remercions Bruno Lesieur qui nous a autorisés à publier ce tutoriel.

Nous remercions également Laethy pour la mise au gabarit et ced pour la correction orthographique.