اختصارات JavaScript: دليل أساسي

تقديم انتباهكم هو ترجمة لمقال بقلم Parathan Thiyagalingam منشور على medium.freecodecamp.org. تريد أن تعرف كيف تعمل إغلاق جافا سكريبت؟ انظر تحت القط!


صور أوستن ديستل مع Unsplash

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

قبل أن تبدأ في فهم مفهوم عمليات الإغلاق ، ضع في اعتبارك ما هي سلاسل النطاق في JavaScript.

كقاعدة عامة ، هناك نوعان من مناطق الرؤية: عالمية ومحلية.

في JavaScript ، لا يمكن الوصول إلى متغير داخل إحدى الوظائف خارجيًا - على عكس ، على سبيل المثال ، المتغيرات داخل كتلة (في ظروف مثل if while ).

بناءً على ذلك ، فإن وظيفة في JavaScript لها نطاق ، لكن الكتلة لا تحتوي على نطاق.

 var a = 10; function app(){ var b = 2; console.log(a); // 10 console.log(b); // 2 } console.log(b); // ReferenceError: b is not defined app(); 

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

كيفية استخدام دالة متداخلة (وظيفة داخل وظيفة)

 var a = 10; function app(){ var b = 2; var d = 3; function add(){ var c = a + b; } return add; } var x = app(); console.dir(x); 

في المثال أعلاه ، app هو الوظيفة الأصل ، add هي الوظيفة الفرعية.

• بدلاً من console.log ، يتم استخدام console.dir لعرض كل خصائص الكائن المحدد.
• يتم تعيين المتغير x إلى وظيفة app ، والتي تقوم بإرجاع وظيفة add . يسمح لك هذا برؤية كل خصائص كائن وظيفة add .

إذا قمت بفتح وحدة التحكم في مستعرض ، فستجد كائن Closure داخل صفيف بيانات النطاق.



نظرًا لأن add الداخلية add لها حق الوصول إلى المتغيرات b و d التي تنتمي إلى الوظيفة الخارجية ، سيتم إضافة هذين المتغيرين إلى كائن Closure كمرجع.
النظر في مثال آخر إغلاق.

 var a = 10; var startFunc; function app(){ var b = 2; function add(){ var c = a + b; console.log(c); } startFunc = add(); } app(); // Invoke the app function startFunc; // as the app function invoked above will assign the add function to startFunc & console the value of c 

• startFunc تعيين وظيفة startFunc العالمية بوظيفة add ، والتي هي تابعة app الوظيفة الأصل.
• يصبح هذا ممكنًا فقط بعد استدعاء وظيفة التطبيق. خلاف ذلك ، سوف تتصرف وظيفة startFunc كمتغير عام بدون قيمة معينة.

كيفية استخدام الإغلاق في جافا سكريبت

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

وبما أننا نتحدث عن الوظائف - تبدأ الوظيفة المسماة فورًا (IIFE) فور الإعلان. إنها لا تحتاج حتى أن يتم استدعاؤها.

بناء جملة IIFE يشبه هذا:

 (function(){ //variables & scope that inside the function })(); 

النظر في هذا المثال:

 var studnetEnrollment = (function () { //private variables which no one can change //except the function declared below. var count = 0; var prefix = "S"; // returning a named function expression function innerFunc() { count = count + 1; return prefix + count; }; return innerFunc; })(); var x = studnetEnrollment(); // S1 console.log(x); var y = studnetEnrollment(); // S2 console.log(y); 

count prefix متغيرين خاصين لا يمكن تغييرهما. الوصول إليها مفتوح فقط للوظيفة الداخلية (في حالتنا ، هذه هي الدالة innerFunc ).

• في المرة الأولى التي يتم فيها استدعاء دالة studentEnrollment تزيد دالة studentEnrollment من قيمة متغير count إلى 1.
• في المرة الثانية ، يزداد count من 1 إلى 2.
• كل هذا ممكن فقط من خلال الإغلاق.

استنتاج

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

تتيح وظيفة الإغلاق للمطورين كتابة تعليمات برمجية نظيفة - كما هو الحال في لغات البرمجة الموجهة للكائنات ، والتي لا يتم فيها خلط المتغيرات العامة والمحلية.

---

هل لديك الترميز لطيفة!