انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 83
دورة جافا سكريبت

Arrow Function

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,029
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

Arrow Function

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

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

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

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

Syntax

HTML 
object = ( ) => return ;

Examples

Before

HTML 
hello = function() {
  return "Hello World!";
}
جرّب بنفسك

With Arrow Function

HTML 
hello = () => {
  return "Hello World!";
}
جرّب بنفسك

Arrow Functions Return Value

HTML 
hello = () => "Hello World!";
جرّب بنفسك

Arrow Function With Parameters

HTML 
hello = (val) => "Hello " + val;
جرّب بنفسك

Arrow Function Without Parentheses

HTML 
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

HTML 
/* 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

HTML 
/* 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

HTML 
var x = function(x, y) {
  return x * y;
}

/* ES6 */
const x = (x, y) => x * y;
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…