A Closure 是 Javascript 功能，其中包含在另一個函數（外部函數）內的函數在外部函數外部返回並調用。

當內部函數保持對其作用域（即詞法作用域）之外的變數的存取時，就會形成閉包； 即使在外部函數執行後也可以存取外部函數的變數和參數。

讓我們建立一個稅務計算器閉包函數，根據酒精和非酒精飲料的稅率計算稅金。

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

如您所見，每種飲料將始終根據其是酒精飲料還是非酒精飲料來記住其稅率，即返回的函數是在taxCalculator之外調用的，並且能夠檢索增值稅參數值，即使主函數函數taxCalculator已被執行。

在 React js、JavaScript UI 函式庫中，事件處理程序在 JSX 上內嵌聲明。

Click me 

如果事件處理程序有參數，它將在函數內部呼叫。

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (

  { actions.map(action => 
handleAction(action)}>{action})}
  
)
}

注意，當handleAction被指派給onclick事件處理程序時，它是由箭頭函數封裝的。

透過閉包，我們可以簡單地使用操作參數呼叫handleAction，然後傳回一個內部函數，該函數取得操作參數並執行其餘操作，如下所示。

function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    

      {actions.map((action) => (
        
          {action}
        
      ))}
    
  );
}

注意我們如何直接在 OnClick 事件上呼叫 handleAction 嗎？ 另請注意，我們重構了handleAction 函數，以便它傳回一個帶有開關執行必要操作的函數？

handleAction在元件安裝時被調用，當handleAction返回的函數抓取並保留handleAction上參數的值時，即使它（handleAction）在第一次渲染期間執行，也會發生閉包。
這是在 Javascript 中處理事件的巧妙方法。您覺得怎麼樣？