ما المقصود بإغلاق JavaScript وكيف تكتبها؟

JavaScript هي واحدة من أصعب لغات البرمجة لإتقانها. في بعض الأحيان ، حتى كبار المطورين غير قادرين على التنبؤ بإخراج الكود الذي كتبوه. من أكثر المفاهيم المربكة في JavaScript الإغلاق. عادة ما يتعثر المبتدئين في هذا المفهوم - لا تقلق. ستوجهك هذه المقالة ببطء عبر الأمثلة الأساسية لمساعدتك على فهم عمليات الإغلاق بشكل أفضل. هيا بنا نبدأ.

ما هي عمليات الإغلاق؟

الإغلاق هو بنية الوظيفة وبيئتها المعجمية ، بما في ذلك أي متغيرات في نطاق الوظيفة عند إنشاء الإغلاق. بعبارات أبسط ، ضع في اعتبارك وظيفة خارجية ووظيفة داخلية. ستتمكّن الوظيفة الداخلية من الوصول إلى نطاق الوظيفة الخارجية.

قبل النظر في بعض أمثلة إغلاق JavaScript ، ستحتاج إلى فهم النطاق المعجمي.

ما هي البيئة المعجمية؟

البيئة المعجمية هي الذاكرة المحلية مع بيئتها الأم. تحقق من المثال الموضح أدناه وخمن ناتج الكود التالي:

الوظيفة الخارجية () { 
 دع أ = 10 ؛
 console.log (ذ) ؛
 داخلي()؛
 الوظيفة الداخلية () {
 console.log (أ) ؛
 console.log (ذ) ؛
 }
}
دع ص = 9 ؛
خارجي () ؛

سيكون الإخراج 9, 10, 9. يمكن للدالة الداخلية الوصول إلى المتغيرات الخاصة بوالدتها ، و خارجي ()

وظيفة. ومن ثم ، فإن داخلي() وظيفة يمكن الوصول إليها متغير أ. ال داخلي() وظيفة يمكن الوصول إليها أيضا متغير y بسبب مفهوم سلسلة النطاق.

أصل الوظيفة الخارجية عام ، وأصل الدالة الخارجية داخلي() الوظيفة هي خارجي () وظيفة. ومن ثم ، فإن داخلي() وظيفة لديها حق الوصول إلى المتغيرات من والديها. إذا حاولت الوصول إلى المتغير أ في النطاق العام ، فإنه سيتم عرض خطأ. ومن ثم ، يمكنك القول أن ملف داخلي() الوظيفة هي معجميًا داخل ملف خارجي () الوظيفة ، والوالد المعجمي لـ خارجي () الوظيفة عالمية.

شرح أمثلة إغلاق جافا سكريبت

نظرًا لأنك تعلمت عن البيئة المعجمية ، يمكنك بسهولة تخمين ناتج الكود التالي:

الوظيفة أ () {
 دع x = 10 ؛
 الوظيفة ب () {
 console.log (x) ؛
 }
 ب()؛
}
أ()؛

الإخراج 10. بينما قد لا تخمنه للوهلة الأولى ، هذا مثال على الإغلاق في JavaScript. عمليات الإغلاق ليست أكثر من وظيفة وبيئتها المعجمية.

لنأخذ مثالاً حيث توجد ثلاث وظائف متداخلة داخل بعضها البعض:

الوظيفة أ () { 
 دع x = 10 ؛
 الوظيفة ب () { 
 الوظيفة ج () {
 الوظيفة د () {
 console.log (x) ؛
 }
 د()؛
 }
 ج () ؛
 }
 ب()؛
}
أ()؛

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

ألق نظرة على مثال آخر مثير للاهتمام:

الوظيفة x () {
 دع أ = 9 ؛
 وظيفة الإرجاع y () {
 console.log (أ) ؛ 
 }
}
دع ب = س () ؛

يمكنك إرجاع دالة داخل دالة ، وإسناد وظيفة إلى متغير ، وتمرير دالة داخل دالة a تعمل في JavaScript. هذا هو جمال اللغة. هل يمكنك تخمين ما سيكون الإخراج إذا قمت بطباعة متغير ب? سوف تطبع وظيفة ص (). الوظيفة x () إرجاع دالة ص (). ومن ثم ، فإن المتغير ب يخزن وظيفة. الآن ، هل يمكنك تخمين ما سيحدث إذا اتصلت بالمتغير ب? يطبع قيمة المتغير أ: 9.

يمكنك أيضًا إخفاء البيانات باستخدام الإغلاق. من أجل فهم أفضل ، ضع في اعتبارك مثالاً يحتوي على زر له معرف باسم "الزر" في المتصفح. دعونا نعلق انقر فوق مستمع الحدث.

أنت الآن بحاجة إلى حساب عدد مرات النقر فوق الزر. هناك طريقتان للقيام بذلك.

1. قم بإنشاء عدد متغير عام وزيادته عند النقر. لكن هذه الطريقة بها عيب. من السهل إجراء تعديلات في المتغيرات العالمية لأنه يسهل الوصول إليها.

   انقر فوق لي
   
   

2. يمكننا تحقيق إخفاء البيانات باستخدام الإغلاق. يمكنك لف كامل addEventListener () تعمل داخل دالة. يجعل الإغلاق. وبعد إنشاء الإغلاق ، يمكنك إنشاء ملف متغير العد وزيادة قيمتها عند النقر. باستخدام هذه الطريقة ، سيبقى المتغير في النطاق الوظيفي، ولا يمكن إجراء أي تعديل.

   انقر فوق لي
   
   

متعلق ب: البطل الخفي للمواقع: فهم DOM

لماذا تعتبر عمليات الإغلاق مهمة؟

تعتبر عمليات الإغلاق مهمة جدًا ليس فقط عندما يتعلق الأمر بجافا سكريبت ، ولكن أيضًا في لغات البرمجة الأخرى. إنها مفيدة في الكثير من السيناريوهات حيث يمكنك إنشاء متغيرات في نطاقها الخاص أو دمج الوظائف ، من بين حالات أخرى.

ضع في اعتبارك هذا المثال لتكوين الوظيفة:

ضرب باستمرار = (أ ، ب) => أ * ب ؛
const اضربBy2 = x => اضرب (10 ، x) ؛
console.log (multiplyBy2 (9)) ؛

يمكننا تنفيذ نفس المثال باستخدام الإغلاق:

الضرب المستمر = الوظيفة (أ) {
 وظيفة العودة (ب) {
 العودة أ * ب
 }
}
const اضرب By2 = ضرب (2) ؛
console.log (multiplyBy2 (10))

يمكن للوظائف استخدام الإغلاق في السيناريوهات التالية:

1. لتنفيذ وظيفة الكاري
2. لاستخدامها لإخفاء البيانات
3. لاستخدامها مع مستمعي الأحداث
4. لاستخدامها في طريقة setTimeout ()

لا يجب استخدام الإغلاق دون داع

يوصى بتجنب عمليات الإغلاق ما لم تكن هناك حاجة حقيقية إليها لأنها قد تؤدي إلى خفض أداء تطبيقك. سيكلف استخدام الإغلاق الكثير من الذاكرة ، وإذا لم يتم التعامل مع عمليات الإغلاق بشكل صحيح ، فقد يؤدي ذلك إلى تسريبات الذاكرة.

لن يتم تحرير المتغيرات المغلقة على المتغيرات بواسطة جامع القمامة في JavaScript. عند استخدام المتغيرات داخل الإغلاق ، لا يتم تحرير الذاكرة بواسطة أداة تجميع البيانات المهملة لأن المتصفح يشعر أن المتغيرات لا تزال قيد الاستخدام. ومن ثم ، فإن هذه المتغيرات تستهلك الذاكرة وتقلل من أداء التطبيق.

إليك مثال يوضح كيف أن المتغيرات داخل الإغلاق لن يتم جمعها من القمامة.

 الوظيفة و () {
 كونست س = 3 ؛
 وظيفة العودة الداخلية () {
 console.log (x) ؛
 }
 }
 F()()؛

ال متغير س هنا يستهلك الذاكرة على الرغم من عدم استخدامها بشكل متكرر. لن يتمكن جامع القمامة من تحرير هذه الذاكرة لأنها داخل الإغلاق.

جافا سكريبت لا نهاية لها

يعد إتقان JavaScript مهمة لا نهاية لها ، حيث يوجد العديد من المفاهيم والأطر التي لا يتم استكشافها عادةً من قبل المطورين ذوي الخبرة أنفسهم. يمكنك تحسين التعامل مع JavaScript بشكل ملحوظ من خلال تعلم الأساسيات وممارستها بشكل متكرر. التكرارات والمولدات هي بعض المفاهيم التي تطرحها المقابلات أثناء مقابلات JavaScript.

مقدمة إلى التكرارات والمولدات في JavaScript

تعرف على طرق التكرار والمولد في JS.

اقرأ التالي

عن المؤلف