Tillämpning av funktioners lexikaliska miljö i JavaScript

Låt oss säga att vi har en funktion som returnerar en annan funktion som sitt resultat:

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

Om den överordnade funktionen har några variabler kommer dessa variabler att ingå i den returnerade funktionens lexikaliska miljö:

javascriptfunction test() {
  let num = 1; // variabel i den överordnade funktionen
  
  return function() {
    // lexikaliskt miljö = {num: 1}
  }
}

Låt oss skriva console.log i koden för vår returnerade funktion som skriver ut värdet på variabeln num:

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

Låt oss nu anropa den överordnade funktionen test och spara resultatet av dess exekvering i variabeln func:

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

let func = test();

Den returnerade funktionen kommer att sparas i variabeln func. Låt oss anropa vår funktion - som sitt resultat kommer den att skriva ut innehållet i variabeln num:

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

let func = test();
func(); // skriver ut 1

Om man däremot bara försöker skriva ut variabeln num utanför funktionen kommer den inte att vara tillgänglig:

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

console.log(num); // variabeln num är inte tillgänglig här

Som du ser har den lokala variabeln num bundits till vår funktions lexikaliska miljö och nu, genom att anropa denna funktion var som helst i koden, kan vi få värdet på variabeln num, även om variabeln i sig inte är tillgänglig på platsen där den anropas.

Faktum är att ett liknande resultat kan uppnås genom att göra variabeln num global:

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

let num = 1; // global variabel
let func = test();
func(); // skriver ut 1

Men här kommer det att finnas en betydande skillnad: i det nya alternativet kan variabeln num ändras utanför funktioner (eftersom den är global), medan det i det gamla alternativet inte går.

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());