الفكرة الأساسية وراء هذا السؤال هي فهم الفرق بين الطريقتين المختلفتين لتعريف الدوال في كائنات JavaScript في ES6، وكيف يتفاعل ذلك مع استخدام “super” في الدوال داخل الكائنات.
بدايةً، يجدر بنا أن نلاحظ أن الفرق الرئيسي بين الطريقتين هو بسيط: في النهج ES5، يتم تعريف الدوال باستخدام كلمة “function” داخل الكائن، بينما في النهج ES6، يمكننا تعريف الدوال ببساطة باستخدام الاسم فقط دون كلمة “function”.
الفرق الأساسي الثاني هو في كيفية معالجة “super”. عند استخدام “super” في دالة داخل كائن مشتق (مشتق من كائن آخر باستخدام “extends”، والذي ليس محل هذا النقاش)، يشير “super” إلى مكان الدالة المحددة في الكائن الأساسي.
المشكلة تنشأ عند استخدام “super” في دالة داخل كائن ليس مشتقًا، مثل الحالة الثانية التي ذكرتها. في هذه الحالة، “super” ليس له مكان ليشير إليه، لأنه لا يوجد كائن أساسي محدد. وهذا هو السبب في الخطأ الذي تراه “Uncaught SyntaxError: ‘super’ keyword unexpected here”، حيث أن “super” غير متوقع داخل دالة في كائن ليس مشتقًا.
لتجنب هذا الخطأ، يمكنك استخدام “super” فقط داخل دوال في الكائنات المشتقة، أو استخدام طريقة تقليدية للإشارة إلى الدالة في الكائن الأصلي بشكل مباشر.
المزيد من المعلومات
بالإضافة إلى ما تم ذكره أعلاه، يمكننا أن نضيف بعض التوضيحات الإضافية حول استخدام “super” والفرق بين الطريقتين في ES6.
عند استخدام “super” في دالة داخل كائن مشتق، يتم استخدامه للإشارة إلى دالة مماثلة في الكائن الأساسي الذي تم مشتقته منه. فهذا يسمح لنا بالوصول إلى السلوك الخاص بالكائن الأساسي وتوسيعه أو تعديله داخل الكائن المشتق. وهذا هو السبب في أن الأولى من الأمثلة السابقة تعمل بشكل صحيح، حيث تكون الدالة “greet” في الكائن “person” مشتقة.
أما في الحالة الثانية، يتم تعريف الدالة “greet” كدالة تقليدية في الكائن “person”، وليست مشتقة من كائن آخر. وبالتالي، لا يمكن استخدام “super” في هذا السياق، مما يؤدي إلى حدوث الخطأ الذي تم ذكره.
هذا الفارق يعكس الفرق الأساسي بين كيفية تعريف الدوال في ES5 وES6، حيث أن الأخير يسمح بطريقة أكثر سهولة ووضوحًا لتعريف الدوال داخل الكائنات. ومع ذلك، يجب أن نكون حذرين عند استخدام “super” للتأكد من أنه يُستخدم فقط في السياقات المناسبة، وهي السياقات التي تشير إلى وجود كائن مشتق.
