座標轉換

閉包是 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