Примена на лексичкото опкружување на функции во JavaScript

Нека имаме функција која како резултат враќа друга функција:

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

Ако родителската функција има какви било променливи, тогаш овие променливи ќе се содржат во лексичкото опкружување на вратената функција:

javascriptfunction test() {
  let num = 1; // променлива на родителската функција
  
  return function() {
    // лексичко опкружување = {num: 1}
  }
}

Да напишеме во кодот на нашата вратена функција console.log, кој ја печати вредноста на променливата num:

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

Сега да ја повикаме родителската функција test и резултатот од нејзиното извршување да го запишеме во променливата func:

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

let func = test();

Во променливата func ќе се запише вратената функција. Да ја повикаме нашата функција - како резултат ќе ја испечати содржината на променливата num:

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

let func = test();
func(); // ќе испечати 1

Доколку едноставно се обидеме да ја испечатиме променливата num надвор од функцијата - таа нема да биде достапна:

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

console.log(num); // променливата num овде не е достапна

Како што можете да видите, локалната променлива num се поврза со лексичкото опкружување на нашата функција и сега, повикувајќи ја на кое било место во кодот оваа функција, ќе можеме да ја добиеме вредноста на променливата num, дури и ако на местото на повикување самата по себе оваа променлива не е достапна.

Всушност, на сличен резултат може да се дојде со тоа што променливата num ќе се направи глобална:

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

let num = 1; // глобална променлива
let func = test();
func(); // ќе испечати 1

Сепак, овде ќе има значителна разлика: во новата верзија променливата num може да се менува надвор од функциите (бидејќи е глобална), додека во старата - не може.

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