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 中处理事件的一种巧妙方法。您觉得怎么样？