Anvendelse av leksisk omgivelse for funksjoner i JavaScript

La oss si at vi har en funksjon som returnerer en annen funksjon som sitt resultat:

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

Hvis foreldrefunksjonen har noen variabler, vil disse variablene være inkludert i den leksiske omgivelsen til den returnerte funksjonen:

javascriptfunction test() {
  let num = 1; // variabel for foreldrefunksjonen
  
  return function() {
    // leksisk omgivelse = {num: 1}
  }
}

La oss skrive en console.log i koden til vår returnerte funksjon som skriver ut verdien av variabelen num:

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

La oss nå kalle foreldrefunksjonen test og lagre resultatet av dens kjøring i variabelen func:

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

let func = test();

Den returnerte funksjonen vil bli lagret i variabelen func. La oss kalle vår funksjon - den vil som sitt resultat skrive ut innholdet i variabelen num:

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

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

Hvis man derimot bare prøver å skrive ut variabelen num utenfor funksjonen - vil den være utilgjengelig:

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

console.log(num); // variabelen num er ikke tilgjengelig her

Som du ser, har den lokale variabelen num bundet seg til den leksiske omgivelsen til vår funksjon, og nå, ved å kalle denne funksjonen hvor som helst i koden, kan vi få tak i verdien til variabelen num, selv om variabelen i seg selv er utilgjengelig på stedet der den kalles.

Faktisk kan man oppnå et tilsvarende resultat ved å gjøre variabelen num global:

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

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

Men her vil det imidlertid være en vesentlig forskjell: i den nye versjonen kan variabelen num endres utenfor funksjoner (siden den er global), noe som ikke var tilfellet i den gamle.

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