Application de l'environnement lexical des fonctions en JavaScript

Supposons que nous ayons une fonction qui retourne une autre fonction comme résultat :

javascriptfunction test() {
  return function() {
    
  }
}

Si la fonction parente a des variables, ces variables seront contenues dans l'environnement lexical de la fonction retournée :

javascriptfunction test() {
  let num = 1; // variable de la fonction parente
  
  return function() {
    // environnement lexical = {num: 1}
  }
}

Écrivons dans le code de notre fonction retournée console.log, affichant la valeur de la variable num :

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

Appelons maintenant la fonction parente test et enregistrons son résultat dans la variable func :

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();

La fonction retournée sera enregistrée dans la variable func. Appelons notre fonction - elle affichera le contenu de la variable num comme résultat :

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();
func(); // affichera 1

Si vous essayez simplement d'afficher la variable num en dehors de la fonction - elle sera inaccessible :

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

console.log(num); // la variable num est inaccessible ici

Comme vous pouvez le voir, la variable locale num s'est liée à l'environnement lexical de notre fonction et maintenant, en appelant cette fonction n'importe où dans le code, nous pouvons obtenir la valeur de la variable num, même si à l'endroit de l'appel cette variable n'est pas accessible par elle-même.

En fait, un résultat similaire peut être obtenu en rendant la variable num globale :

javascriptfunction test() {
  return function() {
    console.log(num);
  }
}

let num = 1; // variable globale
let func = test();
func(); // affichera 1

Cependant, il y aura une différence substantielle ici : dans la nouvelle version, la variable num peut être modifiée en dehors des fonctions (car elle est globale), alors que dans l'ancienne - non.

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());