〖學習筆記〗簡單例子了解「閉包」是什麼？

閉包的概念：內部函數依賴於外部函數的變數來工作

Aug 7, 2022

以 CSS中相對長度單位 — em 的換算公式為例：

em = 目標像素值(px) / 父元素像素值(px)
備註：若父元素無設定 font-size 屬性值，則繼續往上繼承，直到根元素；若 CSS 中皆無設定，則依照瀏覽器預設值：通常是 16px。

function giveMeEms(pixels) {
  var baseValues = 16;
  function doTheMath() {
    return pixels / baseValues;
  }
  return doTheMath; 
}

此時 console.log(giveMeEms(12)) 會直接印出 doTheMath function：

function doTheMath() {
  return pixels / baseValues;
}

因為 giveMeEms 沒有直接運行 doTheMath ，而是當作變數直接回傳，所以才會印出整個 function，然後關閉其他內容。

接著，我們再定義幾個變數代表裝置尺寸：

var sm = giveMeEms(12);
var md = giveMeEms(18);
var ls = giveMeEms(24);
var xl = giveMeEms(32);

console.log 以上幾個變數，並當作函數進行呼叫（這樣才能執行函數得到結果）：

console.log('sm:', sm()); // 0.75
console.log('md:', md()); // 1.125
console.log('ls:', ls()); // 1.5
console.log('xl:', xl()); // 2

一般來說， giveMeEms在定義變數時已經執行完了，函數中所有變數都會被丟棄，當我們在console.log時應該不能獲得 pixels 這個變數

但因為閉包的關係，可以做到這件事情，即使關閉giveMeEms 這個函數，我們仍然可以取到裡面的變數。

Reference