متى (ولماذا) يجب عليك استخدام وظائف سهم ES6 - ومتى لا يجب عليك ذلك

تعد وظائف الأسهم (وتسمى أيضًا "وظائف سهم الدهون") بلا شك واحدة من أكثر ميزات ES6 شيوعًا. قدموا طريقة جديدة لكتابة وظائف موجزة.

هذه وظيفة مكتوبة في بناء جملة ES5:

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

الآن ، هنا نفس الوظيفة المعبر عنها كدالة السهم:

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

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

من المهم فهم كيف تتصرف وظيفة السهم بشكل مختلف مقارنة بوظائف ES5 العادية.

الاختلافات

هناك شيء واحد ستلاحظه بسرعة وهو تنوع التركيبات المتاحة في وظائف الأسهم. دعنا نجري بعضًا من الأشياء الشائعة:

1. لا توجد معلمات

إذا لم تكن هناك معامِلات ، يمكنك وضع أقواس فارغة قبل =&gt ؛.

() => 42

في الواقع ، لا تحتاج حتى إلى الأقواس!

_ => 42

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

باستخدام هذه الوظائف ، تكون الأقواس اختيارية:

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

3. معلمات متعددة

الأقواس مطلوبة لهذه الوظائف:

(x, y) => 42

4. البيانات (مقابل التعبيرات)

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

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

فيما يلي مثال على وظيفة السهم المستخدمة مع عبارة if:

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

5. "كتلة الجسم"

إذا كانت وظيفتك في كتلة ، فيجب عليك أيضًا استخدام returnالعبارة الصريحة :

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

6. كائن حرفية

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

x =>({ y: x })

مجهول من الناحية النحوية

من المهم ملاحظة أن وظائف السهم مجهولة ، مما يعني أنه لم يتم تسميتها.

يخلق عدم الكشف عن الهوية هذا بعض المشكلات:

  1. من الصعب التصحيح

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

2. لا يوجد مرجع ذاتي

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

الفائدة الرئيسية: لا يوجد ارتباط بـ "هذا"

في تعبيرات الوظائف الكلاسيكية ، thisترتبط الكلمة الأساسية بقيم مختلفة بناءً على السياق الذي تسمى فيه. مع وظائف السهم ومع ذلك، thisو ملزمة مفرداتيا . هذا يعني أنه يستخدم thisمن الكود الذي يحتوي على وظيفة السهم.

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

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

في مثال ES5 ، .bind(this)مطلوب للمساعدة في تمرير thisالسياق إلى الوظيفة. خلاف ذلك ، بشكل افتراضي thisسيكون غير محدد.

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

لا يمكن ربط وظائف سهم ES6 بكلمة thisأساسية ، لذلك سترتفع معجميًا نطاقًا ، وتستخدم القيمة thisفي النطاق الذي تم تعريفها فيه.

متى يجب ألا تستخدم وظائف السهم

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

فيما يلي بعض الحالات التي ربما لا ترغب في استخدامها:

  1. طرق الكائن

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

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

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

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

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

إذا نقرنا على الزر ، فسنحصل على خطأ في النوع. هذا بسبب thisعدم ارتباطه بالزر ، ولكنه مرتبط بدلاً من ذلك بنطاقه الأصلي.

3. عندما تجعل التعليمات البرمجية الخاصة بك أقل قابلية للقراءة

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

متى يجب عليك استخدامها

تتألق وظائف الأسهم بشكل أفضل مع أي شيء يتطلب thisالارتباط بالسياق ، وليس الوظيفة نفسها.

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

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