Mécanismes de pré-compilation et variables globales implicites en JavaScript

1. Les variables globales implicites

En JavaScript, toute variable utilisée sans avoir été préalablement déclarée (via var, let ou const) est considérée comme une variable globale implicite. Ces variables sont automatiquement rattachées à l'objet global (window dans un navigateur).

var x = 10; // Variable globale explicite
y = 20;     // Variable globale implicite

function executer() {
    var z = 30; // Variable locale
    w = 40;     // Variable globale implicite
}

executer(); 
// Si executer() n'est pas appelée, w n'existe pas encore.
console.log(w); // Affiche 40
console.log(z); // Erreur : z is not defined

2. Le cycle d'exécution du moteur JavaScript

Le traitement d'un script JavaScript suit généralement trois étapes clés :

  1. Analyse syntaxique : Vérification de la cohérence du code. En cas d'erreur de syntaxe majeure, l'exécution s'arrête immédiatement.
  2. Pré-compilation : Création des contextes d'exécution et gestion du phénomène de "Hoisting" (élévation des déclarations).
  3. Exécution : Interprétation et exécution ligne par ligne.

3. Le processus de pré-compilation

La pré-compilation intervientt à deux niveaux : globalement lors du chargement du script, et localement à chaque appel de fonction.

Pré-compilation Globale (Global Object - GO)

  1. Création de l'objet global GO (équivalent à window).
  2. Analyse des variables : les déclarations sont déplacées en haut du scope et initialisées à undefined.
  3. Analyse des fonctions : les déclarations de fonctions sont déplacées en haut. Si un nom de fonction entre en collision avec une varible, la fonction prime.

Pré-compilation de Fonction (Activation Object - AO)

  1. Juste avant l'exécution de la fonction, création d'un objet AO.
  2. Élévation des paramètres formels et des variables locales (initialisés à undefined).
  3. Assignation des arguments réels aux paramètres formels.
  4. Élévation des déclarations de fonctions internes : elles deviennent des propriétés de l'objet AO et écrasent d'éventuelles variables de même nom.

Exemple pratique d'analyse

var score = 100;
function calculer(data) {
    console.log(data);
    var data = 50;
    console.log(data);
    function data() {}
    var bonus = 10;
    function extra() {}
}
calculer(10);

Étape 1 : Pré-compilation Globale

// Objet GO initial
GO = {
    score: undefined,
    calculer: function calculer(data) { ... }
}

Étape 2 : Pré-compilation de la fonction calculer(10)

Lors de l'appel, le moteur crée l'objet AO :

  • Déclaration des variables et paramètres : data et bonus sont mis à undefined.
  • Passage des arguments : data reçoit la valeur 10.
  • Déclaration des fonctions : La fonction data() est détectée. Elle rmeplace la valeur numérique du paramètre data. La fonction extra() est également ajoutée.
// Objet AO final avant exécution de la première ligne
AO = {
    data: function data() {}, // La fonction a écrasé la valeur 10
    bonus: undefined,
    extra: function extra() {}
}

Résultat de l'exécution :

  1. Le premier console.log(data) affiche le corps de la fonction data() car la pré-compilation a déjà eu lieu.
  2. L'instruction var data = 50 réassigne la valeur 50 à la propriété data de l'AO.
  3. Le second console.log(data) affiche alors 50.

Étiquettes: JavaScript scope hoisting V8-Engine web-development

Publié le 19 juin à 03h06