Arrow Function
سنتعرف في هذا الدرس علي نوع جديد من الدوال وهو arrow function
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left Arrow Function chevron_left JavaScript
Arrow Function
</> Arrow Function
- تم انشاء ال arrow function في الاصدار ES6
- تسمح لنا arrow function بأنشاء دوال عن طريق كتابة احرف قليلة
- سميت ب arrow function لأنها تشبه " السهم "
- إذا لم يوجد معاملات يتم ترك الأقواس فارغة (ولكن يجب كتابتها):
Syntax
object = ( ) => return ;
لا يمكن استخدام ال arrow function الا في حالة ان الدالة لا تحتوي الا علي سطر واحد فقط
</> Examples
</> 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;
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
