A الإغلاق هي إحدى ميزات 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.

في رد فعل 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 مغلف بوظيفة سهم عند تعيينه لمعالج الأحداث عند النقر.

مع الإغلاق يمكننا ببساطة استدعاء 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}
        
      ))}
    
  );
}

هل لاحظت كيف نقوم باستدعاء HandleAction مباشرة في حدث OnClick؟ لاحظ أيضًا أننا قمنا بإعادة هيكلة وظيفة HandleAction بحيث تقوم بإرجاع وظيفة تؤدي الإجراءات اللازمة باستخدام مفتاح التبديل؟

يتم استدعاء HandleAction عندما يتصاعد المكون، ويحدث الإغلاق عندما يتم إرجاع الدالة بواسطة HandleAction وتحتفظ بقيمة الوسيطة في HandleAction على الرغم من تنفيذها (handleAction) أثناء العرض الأول.
إنها طريقة رائعة للتعامل مع الأحداث في Javascript. ما رأيك؟