Funktionien leksikaalisen ympäristön soveltaminen JavaScriptissä

Oletetaan, että meillä on funktio, joka palauttaa tuloksenaan toisen funktion:

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

Jos vanhempifunktiolla on muuttujia, niin nämä muuttujat sisältyvät palautetun funktion leksikaaliseen ympäristöön:

javascriptfunction test() {
  let num = 1; // vanhempifunktion muuttuja
  
  return function() {
    // leksikaalinen ympäristö = {num: 1}
  }
}

Kirjoitetaan palautettavan funktion koodiin console.log, joka tulostaa muuttujan num arvon:

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

Kutsutaan nyt vanhempifunktiota test ja tallennetaan sen tuloksena saatu arvo muuttujaan func:

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

let func = test();

Muuttujaan func tallentuu palautettu funktio. Kutsutaan funktiota - sen tuloksena se tulostaa muuttujan num sisällön:

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

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

Jos yrittää yksinkertaisesti tulostaa muuttujan num funktion ulkopuolella - se ei ole saatavilla:

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

console.log(num); // muuttuja num ei ole saatavilla täällä

Kuten näette, paikallinen muuttuja num sitoutui funktiomme leksikaaliseen ympäristöön ja nyt, kutsumalla tätä funktiota missä tahansa koodin kohdassa, voimme saada muuttujan num arvon, vaikka itse muuttuja ei olisikaan saatavilla kutsukohdassa.

Itse asiassa samaan tulokseen voidaan päästä tekemällä muuttuja num globaaliksi:

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

let num = 1; // globaali muuttuja
let func = test();
func(); // tulostaa 1

Tässä on kuitenkin merkittävä ero: uudessa versiossa muuttujaa num voidaan muuttaa funktioiden ulkopuolella (koska se on globaali), kun taas vanhassa - ei.

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