Anwendung des lexikalischen Umfelds von Funktionen in JavaScript

Angenommen, wir haben eine Funktion, die als Ergebnis eine andere Funktion zurückgibt:

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

Wenn die übergeordnete Funktion irgendwelche Variablen hat, dann sind diese Variablen im lexikalischen Umfeld der zurückgegebenen Funktion enthalten:

javascriptfunction test() {
  let num = 1; // Variable der übergeordneten Funktion
  
  return function() {
    // lexikalisches Umfeld = {num: 1}
  }
}

Schreiben wir in den Code unserer zurückgegebenen Funktion console.log, der den Wert der Variable num ausgibt:

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

Lassen Sie uns nun die übergeordnete Funktion test aufrufen und das Ergebnis ihrer Arbeit in die Variable func schreiben:

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

let func = test();

In die Variable func wird die zurückgegebene Funktion geschrieben. Lassen Sie uns unsere Funktion aufrufen - als ihr Ergebnis wird sie den Inhalt der Variable num ausgeben:

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

let func = test();
func(); // gibt 1 aus

Wenn man versucht, die Variable num außerhalb der Funktion auszugeben - ist sie nicht verfügbar:

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

console.log(num); // Variable num hier nicht verfügbar

Wie Sie sehen, hat sich die lokale Variable num an das lexikalische Umfeld unserer Funktion gebunden und jetzt können wir, wenn wir diese Funktion an einer beliebigen Stelle im Code aufrufen, den Wert der Variable num erhalten, auch wenn die Variable an der Aufrufstelle an sich nicht verfügbar ist.

Tatsächlich kann ein ähnliches Ergebnis erzielt werden, indem man die Variable num global macht:

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

let num = 1; // globale Variable
let func = test();
func(); // gibt 1 aus

Hier gibt es jedoch einen wesentlichen Unterschied: In der neuen Variante kann die Variable num außerhalb der Funktionen geändert werden (da sie global ist), in der alten - nicht.

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