Funkcijų leksinės aplinkos panaudojimas JavaScript

Tarkime, kad turime funkciją, kuri savo rezultatu grąžina kitą funkciją:

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

Jei pagrindinė funkcija turi kokius nors kintamuosius, tai šie kintamieji bus prieinami grąžinamos funkcijos leksinėje aplinkoje:

javascriptfunction test() {
  let num = 1; // pagrindinės funkcijos kintamasis
  
  return function() {
    // leksinė aplinka = {num: 1}
  }
}

Parašykime mūsų grąžinamos funkcijos kode console.log, kuris atspausdina kintamojo num reikšmę:

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

Dabar iškvikime pagrindinę funkciją test ir jos darbo rezultatą įrašykime į kintamąjį func:

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

let func = test();

Į kintamąjį func įrašysime grąžintą funkciją. Iškvieskime mūsų funkciją - savo rezultatu ji atspausdins kintamojo num turinį:

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

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

Jei tiesiog pabandytume pasiekti kintamąjį num už funkcijos ribų - jis bus neprieinamas:

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

console.log(num); // kintamasis num čia neprieinamas

Kaip matote, lokalus kintamasis num prisirišo prie mūsų funkcijos leksinės aplinkos ir dabar, iškvietę bet kurioje kodo vietoje šią funkciją, mes galime gauti kintamojo num reikšmę, net jei toje vietoje pats šis kintamasis yra neprieinamas.

Tiesą sakant, panašų rezultatą galima pasiekti padarius kintamąjį num globaliu:

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

let num = 1; // globalus kintamasis
let func = test();
func(); // atspausdins 1

Tačiau čia bus esminis skirtumas: naujajame variante kintamąjį num galima keisti už funkcijų ribų (kadangi jis globalus), o senajame - ne.

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