الـ this في جافاسكريبت: ليه معناها بيتغيّر حسب مين اللي نادى الدالة

لاحظ إن الدالة ماتغيرتش حرف. اللي اتغيّر هو طريقة النداء. أول مرة كانت user.greet()، تاني مرة بقت sayHi() من غير كائن على الشمال، فضاعت this.

سيناريو واقعي: الباج اللي بيظهر بعد ساعات

لو عندك واجهة فيها زرار وربطت الميثود مباشرة:

لمّا يتضغط الزرار، المتصفح بينده increment والـ this بتبقى عنصر الـ DOM بتاع الزرار مش الكائن c. فـ this.count بتبقى undefined، وundefined++ بتطلع NaN. في الوضع العادي (مش strict) الوضع أخطر: this بتبقى window، فبتكتب على متغيّر عام من غير ما ترمي خطأ، والباج بيفضل مستخبّي.

الأرقام هنا مش عن السرعة، دي عن التكلفة الخفية: باج زي ده في لوحة فيها 30 معالج حدث ممكن ياكل نص يوم debugging، وكله سببه إن this اترمت في سطر ربط واحد.

الحل: bind أو الدالة السهمة

الدالة السهمة ماعندهاش this خاص بيها. بترث this من النطاق المحيط بيها وقت التعريف (lexical). ده بيحلّ مشكلة الـ callbacks بأناقة:

الـ trade-offs: مش كل حل ببلاش

• bind: بيثبّت this بشكل صريح وواضح، لكنه بيعمل دالة جديدة في كل استدعاء. لو حطيت this.method.bind(this) جوه دالة render بتتنفّذ مع كل إعادة رسم، وعندك قائمة 1000 عنصر، انت بتخلق 1000 دالة جديدة كل re-render. ثبّت الـ bind مرة واحدة في الـ constructor بدل ما تكرره.
• الدالة السهمة: بترث this تلقائيًا، بس ماينفعش تستخدمها كـ method على prototype ولا كـ constructor بـ new، لأنها أصلًا ماعندهاش this خاص تربطه.

المقايضة باختصار: bind = تحكّم صريح مقابل دالة إضافية في الذاكرة. Arrow = راحة وربط تلقائي مقابل إنها مش صالحة لكل المواضع.

متى لا تشغّل بالك بـ this أصلًا

لو بتكتب دوال نقية (pure functions) بتاخد كل اللي محتاجاه من المعاملات وبترجّع نتيجة، انت مش محتاج this من الأساس. مررّ البيانات صراحةً بدل ما تعتمد على سياق مخفي. الكود اللي مافيهوش this أسهل في الاختبار وأصعب إنه يتكسر لمّا تنقل الدالة. استخدم this بس لمّا يبقى عندك كائن ليه حالة فعلية بتشتغل عليها الميثودز.

الخطوة التالية

افتح أقرب addEventListener أو setTimeout عندك، وبُصّ على الدالة اللي بتمرّرها. لو هي method من كائن ومتمرّرة بالاسم من غير .bind ولا لفّها في دالة سهمة، دي قنبلة موقوتة. صلّحها دلوقتي بواحد من الحلّين اللي فوق، وجرّب تطبع this جواها قبل وبعد التعديل عشان تشوف الفرق بعينك.

المصادر

• MDN Web Docs — this: توثيق ربط this وقواعده. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
• MDN Web Docs — Arrow function expressions: سلوك this في الدوال السهمة. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• ECMAScript Language Specification (ECMA-262): تعريف this والوضع الصارم رسميًا. tc39.es/ecma262
• Kyle Simpson — You Don't Know JS: this & Object Prototypes: شرح قواعد الربط الأربعة بالتفصيل.