Funktsioonide leksilise keskkonna rakendamine JavaScriptis

Oletame, et meil on funktsioon, mis tagastab teise funktsiooni:

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

Kui vanemfunktsioonil on mõned muutujad, siis need muutujad sisalduvad tagastatava funktsiooni leksilises keskkonnas:

javascriptfunction test() {
  let num = 1; // vanemfunktsiooni muutuja
  
  return function() {
    // leksiline keskkond = {num: 1}
  }
}

Kirjutame oma tagastatava funktsiooni koodi console.log, mis väljastab muutuja num väärtuse:

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

Nüüd kutsume välja vanemfunktsiooni test ja kirjutame selle tulemuse muutujasse func:

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

let func = test();

Muutujasse func kirjutatakse tagastatud funktsioon. Kutsume oma funktsiooni välja - see väljastab muutuja num sisu:

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

let func = test();
func(); // väljastab 1

Kui aga lihtsalt proovida väljastada muutujat num funktsioonist väljaspool - see pole kättesaadav:

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

console.log(num); // muutuja num pole siin kättesaadav

Nagu näete, seondus kohalik muutuja num meie funktsiooni leksilise keskkonnaga ja nüüd, see funktsioon välja kutsudes suvalises kohas koodis, saame muutuja num väärtuse, isegi kui väljakutsumise kohas see muutuja ise pole kättesaadav.

Tegelikult saab sarnast tulemust saavutada, muutes muutuja num globaalseks:

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

let num = 1; // globaalne muutuja
let func = test();
func(); // väljastab 1

Siin on aga oluline erinevus: uues versioonis saab muutujat num muuta funktsioonidest väljaspool (kuna see on globaalne), kuid vanas - mitte.

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