Home

سؤال ممتاز! الفرق الأساسي يكمن في كيفية تعامل كل منهما مع this keyword.

في الدوال العادية (Regular Functions)، تتغير قيمة this بناءً على كيفية استدعاء الدالة:

function regular() {
  console.log(this); // يعتمد على من نادى الدالة
}

أما في Arrow Functions، فإن this تأخذ قيمتها من السياق المحيط وقت التعريف (Lexical Scope) ولا تتغير أبداً:

const arrow = () => {
  console.log(this); // يرث القيمة من الأب
}

لهذا السبب نستخدم الـ Arrow Functions كثيراً في React داخل الـ Callbacks لنتجنب مشاكل bind(this).