Koordináta-transzformáció

A closure egy programozási minta a JavaScriptben, amely lehetővé teszi, hogy egy külső lexical scope változóit egy egymásba ágyazott kódblokkon belül használd. A JavaScript átlátszóan kezeli a closure-öket, és gyakran anélkül használjuk őket, hogy tudnánk, mik is azok.

// 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

A kapcsos zárójeleken ({}) kívül a függvények (és az osztályok) is új scope-okat hoznak létre, és képesek bezárni értékeket:

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

Ahogy a twoDozen példák mutatják, az értékeket be lehet zárni egy egymásba ágyazott scope-ba (függvény, blokk stb.), de nem lehet kihúzni őket abból a kontextusból. A legtöbb esetben a modern JavaScriptben szándékos, hogy egy érték ne szivárogjon ki egy külső scope-ba.

Closure-ök állapot megőrzésére és értékek továbbadására

Egy módosítható változódeklaráció (például let vagy var) használatával megőrizhető valamennyi állapot:

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

Értékek bezárása az állapot kiszivárgása nélkül

A két ötletet ötvözve: ha egy értéket bezárunk, hogy megőrizzük az állapotot, és a bezárt értékek nem szivárognak ki, akkor privát értékeket hozhatunk létre.

A leggyakoribb módszer, hogy készítünk egy függvényt, amely egy olyan függvényt ad vissza, ami bezár magába valamennyi állapotot.

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