متى ولماذا يستحق استخدام دالات السهم ES6 ، ومتى لا

مرحبا يا هبر! أقدم لكم ترجمة المقال " متى (ولماذا) يجب عليك استخدام وظائف السهم ES6 - ومتى لا يجب " بواسطة سينثيا لي.

وظائف السهم هي ميزة ES6 الأكثر شيوعًا. هذه طريقة جديدة ومختصرة لكتابة الوظائف.

function timesTwo(params) { return params * 2 } timesTwo(4); // 8 

الآن نفس الشيء مع وظيفة السهم.

 var timesTwo = params => params * 2 timesTwo(4); // 8 

أقصر بكثير! يمكننا حذف الأقواس المتعرجة وبيان الإرجاع (إذا لم يكن هناك كتلة ، ولكن المزيد عن ذلك لاحقًا).

دعونا نكتشف كيف تختلف الطريقة الجديدة عن الطريقة المعتادة.

بناء الجملة

أول شيء ستلاحظه بسرعة هو اختلاف بناء الجملة. دعونا نلقي نظرة على أهمها:

1. بدون معلمات

إذا كانت الوظيفة لا تحتوي على معلمات ، يمكنك ببساطة كتابة أقواس فارغة قبل =>

 () => 42 

في الواقع ، يمكنك الاستغناء عن الأقواس على الإطلاق!

 _ => 42 

1. معلمة واحدة

الأقواس اختيارية أيضًا

 x => 42 || (x) => 42 

3. العديد من المعلمات

نحتاج هنا بين قوسين

 (x, y) => 42 

4. تعليمات

عادة ، يعيد التعبير الوظيفي قيمة ، بينما تكون التعليمات مسؤولة عن الإجراء.

يجب أن نتذكر أنه في حالة وظائف السهم ، إذا كان لدينا مجموعة من الإجراءات / التعليمات ، يجب علينا استخدام الأقواس المتعرجة وبيان الإرجاع.
فيما يلي مثال لوظيفة السهم المستخدمة مع العبارة if:

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } } 

5. جسم كتلة الفطريات

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

 var addValues = (x, y) => { return x + y } 

6. كائن حرفي

إذا أرجعت الدالة كائنًا حرفيًا ، فيجب وضعه بين قوسين.

 x =>({ y: x }) 

وظائف السهم - مجهول

لاحظ أن دالات الأسهم مجهولة ؛ ليس لها اسم.

هذا يخلق بعض الصعوبات:

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

الميزة الرئيسية: لا هذا

في الوظائف العادية ، يشير هذا إلى السياق الذي يتم فيه استدعاء هذه الوظيفة. دالة السهم هذه هي نفس وظيفة بيئة التصريح عن وظيفة السهم.

على سبيل المثال ، انظر إلى وظيفة setTimeout أدناه:

 // ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } }; 

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

 // ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } }; 

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

متى تستخدم وظائف السهم

الآن ، أعتقد ، أصبح من الواضح أن وظائف الأسهم لا تحل محل الوظائف العادية.

إليك بعض الأمثلة عندما لا ترغب في استخدامها.

1. طرق الكائن

عند استدعاء cat.jumps ، لا ينقص عدد الأرواح. هذا لأن هذا لا يرتبط بأي شيء ، ويرث القيمة من الإغلاق.

 var cat = { lives: 9, jumps: () => { this.lives--; } } 

2. وظائف رد الاتصال مع السياق الديناميكي

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

 var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); }); 

إذا نقرنا على الزر ، نحصل على TypeError. هذا لأن هذا غير مرتبط بزر.

3. عندما تسوء قراءة الرمز

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

متى يستحق استخدام وظائف الأسهم بالضبط

تعتبر وظائف الأسهم رائعة في الحالات التي لا تحتاج فيها إلى سياق الوظيفة الخاص بك.

أنا أيضًا أحب حقًا استخدام وظائف الأسهم في جميع أنواع map reduce - يقرأ الرمز بهذه الطريقة بشكل أفضل.