Koordinatentransformation

Closures sind ein Programmiermuster in JavaScript, mit dem du Variablen aus einem äußeren lexikalischen Gültigkeitsbereich in einem verschachtelten Block verwenden kannst. JavaScript unterstützt Closures ganz selbstverständlich, und sie werden oft benutzt, ohne dass man weiß, was sie eigentlich sind.

// Top-level declarations are global-scope
const dozen = 12;

{
  // Braces create a new block-scope
  // Referencing the outer variable is a closure.
  const twoDozen = dozen * 2;
}

// Because of the block-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

Neben geschweiften Klammern {} erzeugen auch Funktionen (und Klassen) neue Gültigkeitsbereiche und können Werte einschließen:

const dozen = 12;

// Functions create a new function-scope and block-scope.
// Referencing the outer variable here is a closure.
function nDozen(n) {
  // This is declared inside the function scope, and uses the top-level scope.
  // This works, and encloses the value 12.
  const twoDozen = dozen * 2;

  // This only uses the locally declared variable and the passed argument to the parameter `n`
  return (twoDozen / 2) * n;
}

// Because of the function-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

Wie die twoDozen-Beispiele zeigen, lassen sich Werte in einem verschachtelten Gültigkeitsbereich (Funktion, Block usw.) einschließen, aber nicht aus diesem Kontext herausziehen. In den meisten Fällen ist es im modernen JavaScript beabsichtigt, dass ein Wert nicht in einen äußeren Gültigkeitsbereich entweicht.

Closures, um Zustand zu speichern und Werte weiterzugeben

Mit einer veränderlichen Variablendeklaration (wie let oder var) lässt sich ein Zustand bewahren:

let counter = 0;

// This function closure increments the counter's state in the outer lexical context.
// This way the counter can be shared between many calling contexts.
export function increment() {
  counter += 1;
  return counter;
}

increment();
// => 1

counter;
// => 1

Werte einschließen, ohne den Zustand nach außen dringen zu lassen

Kombinierst du die beiden Ideen, also einen Wert einzuschließen, um Zustand zu bewahren, und dafür zu sorgen, dass eingeschlossene Werte nicht nach außen entweichen, dann kannst du private Werte erzeugen.

Am häufigsten erstellst du eine Funktion, die eine Funktion zurückgibt, welche einen Zustand einschließt.

export function makeCounter() {
  let counter = 0;

  // This returns a new function that encloses the local variable counter
  return function increment() {
    counter += 1;
    return counter;
  };
}

// Counter did not leak
counter;
// => Uncaught ReferenceError: counter is not defined

// This creates a new counter.
// This assigns the increment function to the variable myFirstCounter.
const myFirstCounter = makeCounter();

typeof myFirstCounter;
// => function

myFirstCounter.name;
// => increment

myFirstCounter();
// => 1
myFirstCounter();
// => 2

// This creates new counter (with new, separate local state / enclosed counter variable)
const mySecondCounter = makeCounter();

mySecondCounter();
// => 1

// It does not affect the first counter.

myFirstCounter();
// => 3