Ein Abschluss ist eine Javascript-Funktion, bei der eine in einer anderen Funktion (äußere Funktion) eingeschlossene Funktion zurückgegeben und außerhalb der äußeren Funktion aufgerufen wird.

Ein Abschluss wird gebildet, wenn die innere Funktion den Zugriff auf eine Variable außerhalb ihres Gültigkeitsbereichs, auch bekannt als lexikalischer Gültigkeitsbereich, aufrechterhält. Zugriff auf Variablen und Argumente der äußeren Funktion, auch nachdem die äußere Funktion ausgeführt wurde.

Lassen Sie uns eine Steuerrechner-Abschlussfunktion erstellen, um Steuern für alkoholische und alkoholfreie Getränke basierend auf ihren Steuersätzen zu berechnen.

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)

Wie Sie sehen können, merkt sich jedes Getränk immer seinen Steuersatz basierend darauf, ob es sich um ein alkoholisches oder alkoholfreies Getränk handelt, d Funktion taxCalculator wurde ausgeführt.

In React js, der JavaScript-UI-Bibliothek, werden Event-Handler als solche inline auf dem JSX deklariert.

Click me 

Wenn der Event-Handler ein Argument hat, wird er dann innerhalb einer Funktion als solche aufgerufen.

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})}
  
)
}

Beachten Sie, dass die handleAction durch eine Pfeilfunktion gekapselt wird, wenn Sie sie dem Onclick-Ereignishandler zuweisen.

Mit der Schließung können wir einfach handleAction mit einem Aktionsargument aufrufen und dann eine innere Funktion zurückgeben, die das Aktionsargument erfasst und die restlichen Aktionen auf diese Weise ausführt.

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}
        
      ))}
    
  );
}

Beachten Sie, wie wir handleAction direkt beim OnClick-Ereignis aufrufen? Beachten Sie auch, dass wir die handleAction-Funktion umgestaltet haben, sodass sie eine Funktion zurückgibt, die die erforderlichen Aktionen mit einem Schalter durchführt ?

Die handleAction wird aufgerufen, wenn die Komponente gemountet wird. Ein Abschluss erfolgt, wenn die von handleAction zurückgegebene Funktion den Wert des Arguments auf handleAction erfasst und beibehält, obwohl es (handleAction) beim ersten Rendern ausgeführt wurde.
Es ist eine nette Möglichkeit, Ereignisse in Javascript zu verarbeiten. Was denken Sie?