تحويل الإحداثيات

الإغلاقات نمط برمجي في JavaScript يسمح باستخدام متغيرات من النطاق المعجمي الخارجي داخل كتلة كود متداخلة. تدعم JavaScript الإغلاقات بشفافية، وكثيرًا ما تُستخدم دون أن يعرف المبرمج ما هي.

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

إلى جانب الأقواس المعقوفة {}، تُنشئ الدوال (والأصناف) أيضًا نطاقات جديدة، ويمكنها أن تضمّن القيم:

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

وكما توضح أمثلة twoDozen، يمكن تضمين القيم في نطاق متداخل (دالة، كتلة، وما إلى ذلك)، لكن لا يمكن انتزاعها من ذلك السياق. وفي معظم الحالات، تقتضي JavaScript الحديثة ألا تتسرب قيمة إلى نطاق خارجي.

الإغلاقات لحفظ الحالة وتمرير القيم

يتيح استخدام إعلان متغير قابل للتغيير (مثل let أو var) حفظ بعض الحالة:

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

تضمين القيم دون تسريب الحالة

بجمع الفكرتين معًا، تضمين قيمة للحفاظ على الحالة، وعدم تسرّب القيم المضمَّنة إلى الخارج، يمكن إنشاء قيم خاصة.

الأسلوب الأكثر شيوعًا هو إنشاء دالة تُرجع دالة تضمّن بعض الحالة.

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