برنامج تعليمي لوظائف سهم JavaScript

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

تم تقديم وظائف Arrow في ES6 / ECMAScript 2015 ، ومنذ تقديمها قاموا بتغيير شكل كود JavaScript (ويعمل) إلى الأبد.

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

بصريًا ، يعد تغييرًا بسيطًا ومرحبًا به ، والذي يسمح لك بكتابة الوظائف بصيغة أقصر ، من:

const myFunction = function() {
  //...
}

إلى

const myFunction = () => {
  //...
}

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

const myFunction = () => doSomething()

يتم تمرير المعلمات بين قوسين:

const myFunction = (param1, param2) => doSomething(param1, param2)

إذا كانت لديك معلمة واحدة (وواحدة فقط) ، فيمكنك حذف الأقواس تمامًا:

const myFunction = param => doSomething(param)

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

عودة ضمنية

تسمح لك وظائف Arrow بالحصول على إرجاع ضمني: يتم إرجاع القيم دون الحاجة إلى استخدام الامتدادreturnكلمة رئيسية.

يعمل عندما يكون هناك عبارة من سطر واحد في جسم الوظيفة:

const myFunction = () => 'test'

myFunction() //‘test’

مثال آخر ، عند إرجاع كائن ، تذكر لف الأقواس المتعرجة بين قوسين لتجنب اعتبارها أقواس هيكل دالة الالتفاف:

const myFunction = () => ({ value: 'test' })

myFunction() //{value: ‘test’}

كيفthisيعمل في وظائف السهم

thisهو مفهوم يمكن أن يكون معقدًا لفهمه ، لأنه يختلف كثيرًا اعتمادًا على السياق ويختلف أيضًا اعتمادًا على وضع JavaScript (الوضع الصارمأم لا).

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

عندما يتم تعريفها على أنها طريقة كائن ، في وظيفة عاديةthisيشير إلى الكائن ، لذا يمكنك القيام بما يلي:

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

الاتصالcar.fullName()سيعود"Ford Fiesta".

الthisالنطاق مع وظائف السهم هووارثمن سياق التنفيذ. وظيفة السهم لا ترتبطthisعلى الإطلاق ، لذلك سيتم البحث عن قيمته في مكدس الاستدعاءات ، لذلك في هذا الرمزcar.fullName()لن يعمل ، وسيعيد السلسلة"undefined undefined":

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

نتيجة لذلك ، وظائف الأسهم ليست مناسبة كطرق كائن.

لا يمكن استخدام دالات الأسهم كمُنشئين أيضًا ، عندما يؤدي إنشاء كائن إلى رفع ملفTypeError.

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

هذه أيضًا مشكلة عند التعامل مع الأحداث. تم تعيين مستمعي أحداث DOMthisلتكون العنصر المستهدف ، وإذا كنت تعتمد علىthisفي معالج الحدث ، تكون الوظيفة العادية ضرورية:

const link = document.querySelector('#link')
link.addEventListener('click', () => {
  // this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
  // this === link
})

المزيد من دروس js: