JavaScript

Arrow Function

سنتعرف في هذا الدرس علي نوع جديد من الدوال وهو arrow function

التاريخ

31 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

988

المواضيع

24
الشروحات chevron_left Arrow Function chevron_left JavaScript

Arrow Function

</> Arrow Function

- تم انشاء ال arrow function في الاصدار ES6

- تسمح لنا arrow function بأنشاء دوال عن طريق كتابة احرف قليلة

- سميت ب arrow function لأنها تشبه " السهم " 

- إذا لم يوجد معاملات يتم ترك الأقواس فارغة (ولكن يجب كتابتها):

Syntax
object = ( ) => return ;

لا يمكن استخدام ال arrow function الا في حالة ان الدالة لا تحتوي الا علي سطر واحد فقط

</> Examples

Before
hello = function() {
  return "Hello World!";
}
With Arrow Function
hello = () => {
  return "Hello World!";
}
Arrow Functions Return Value
hello = () => "Hello World!";
Arrow Function With Parameters
hello = (val) => "Hello " + val;
Arrow Function Without Parentheses
hello = val => "Hello " + val;

</> this

تختلف القيم التي تقوم بأرجاعها كلمة this في ال arrow function عن ال regular function وهذا لأن في ال arrow function غير ملزم كتابتها 

اما في regular function فهي تشير الي ال object الذي قام باستدعاء الدالة ويمكن ان يكون اي نوع ( window , document , button )

وفي ال arrow function دائما تشير الي object الذي قام بأنشاء الدالة خلاله فقط 

في المثال الاول يتم ارجاع اثنين من ال object المختلفتين وهما ( window , button )

في المثال التالي يتم ارجاع قيمتين متطابقتين وهو window وهذا لأن هذا ال object هو ال owner الخاص بالدالة

Regular Function
/* Regular Function: */
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

/* The window object calls the function: */
window.addEventListener("load", hello);

/* A button object calls the function: */
document.getElementById("btn").addEventListener("click", hello);
Arrow Function
/* Arrow Function: */
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

/* The window object calls the function: */
window.addEventListener("load", hello);

/* A button object calls the function: */
document.getElementById("btn").addEventListener("click", hello);

</> Arrow Functions

ال arrow function هو عبارة عن اسلوب يستخدم في كتابة الدوال لتقليل وتسهيل عملية انشاء دالة وذلك عن طريق استبدال الاقواس المتعرجة "{ } " ب علامة تشبه السهم "<=" ولذلك تسمي " arrow function "

  • لايمكننا استخدام كلمة this في ال arrow functions 
  • لا يمكننا استدعائها في الأسطر التي تسبق عملية التعريف الخاصة بها 
  • لا تحتاج لأنشائها لكتابة كلمة "function "
Example
var x = function(x, y) {
  return x * y;
}

/* ES6 */
const x = (x, y) => x * y;
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.