Funkciju leksiskās vides pielietojums JavaScript

Pieņemsim, ka mums ir funkcija, kas savā rezultātā atgriež citu funkciju:

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

Ja vecāku funkcijai ir kādi mainīgie, tad šie mainīgie tiks iekļauti atgrieztās funkcijas leksiskajā vidē:

javascriptfunction test() {
  let num = 1; // vecāku funkcijas mainīgais
  
  return function() {
    // leksiskā vide = {num: 1}
  }
}

Uzrakstīsim mūsu atgrieztās funkcijas kodā console.log, kas izvada mainīgā num vērtību:

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

Tagad izsauksim vecāku funkciju test un ierakstīsim tās darbības rezultātu mainīgajā func:

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

let func = test();

Mainīgajā func tiks ierakstīta atgrieztā funkcija. Izsauksim mūsu funkciju - savā rezultātā tā izvadīs mainīgā num saturu:

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

let func = test();
func(); // izvadīs 1

Ja vienkārši mēģināt izvadīt mainīgo num ārpus funkcijas - tas būs nepieejams:

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

console.log(num); // mainīgais num šeit nav pieejams

Kā jūs redzat, lokālais mainīgais num piesaistījās mūsu funkcijas leksiskajai videi un tagad, izsaucot jebkurā koda vietā šo funkciju, mēs varam iegūt mainīgā num vērtību, pat ja izsaukšanas vietā pats šis mainīgais nav pieejams.

Patiesībā līdzīgu rezultātu var sasniegt, padarot mainīgo num par globālu:

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

let num = 1; // globālais mainīgais
let func = test();
func(); // izvadīs 1

Šeit tomēr būs būtiska atšķirība: jaunajā variantā mainīgo num var mainīt ārpus funkcijām (tā kā tas ir globāls), bet vecajā - 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());