ليه this بيتغيّر معناه في JavaScript: 4 قواعد تحسمها

لو اتلخبطت بين قاعدتين، فيه ترتيب أولوية واضح: new بيكسب على bind، وbind بيكسب على استدعاء الميثود، واستدعاء الميثود بيكسب على الاستدعاء الحر. والدالة السهمية حالة خاصة بتتجاهل القواعد دي كلها، وهي اللي جاية دلوقتي.

الدوال السهمية: الحل اللي بيقفل أغلب الوجع

الدالة السهمية (=>) مالهاش this خاص بيها أصلاً. لمّا تكتب this جوّاها، هي بتاخدها من المكان اللي اتعرّفت فيه، يعني من الدالة الأب أو الـ scope المحيط. ودي قيمة ثابتة: مفيش call ولا bind يقدر يغيّرها. ده اللي بيخلّيها الحل العملي لأغلب مشاكل this.

المثال الكلاسيكي: عدّاد بيزوّد رقم كل ثانية. النسخة المكسورة الأول:

دلوقتي نفس الكود بدالة سهمية:

الفرق سطر واحد: function () {} بقت () => {}. الدالة العادية اتنادت بشكل حر فخسرت الكائن؛ الدالة السهمية مالهاش this خاص فورّثت this بتاع start.

سيناريو واقعي: زرار دفع بيبعت الطلب مرتين

خد حالة فعلية. عندك صفحة دفع فيها class بيمثّل زرار التأكيد، وميثود handleClick بيعمل this.disabled = true عشان يمنع الضغط مرتين. الكود بيشتغل تمام لمّا تستدعيه يدوي. بس انت ربطته بالحدث كده: button.addEventListener("click", obj.handleClick).

هنا حصلت الكارثة بهدوء. addEventListener بيستدعي الدالة بشكل حر، فـ this بقت مش الكائن. السطر this.disabled = true فشل في صمت، الزرار فضل شغّال، والمستخدم اللي بيدوس مرتين بيبعت الطلب مرتين. في موقع بـ 12 ألف عملية دفع في اليوم، نسبة دوسة مزدوجة 0.8% معناها حوالي 96 طلب مكرر يوميًا لازم يترجّع يدوي. الحل سطر واحد: تبعت obj.handleClick.bind(obj)، أو تعرّف handleClick كـ class field سهمي عشان يفضل مربوط بالكائن مهما اتنقل.

الـ trade-offs اللي محدش بيقولك عليها

كل حل من دول له ثمن. متختارش واحد على عماك.

• الـ class field السهمي (handleClick = () => {...}) بيحل this تمامًا، لكن بيعمل نسخة من الدالة لكل instance بدل ما تتشارك على الـ prototype. لو بتعمل 10 آلاف instance، ده 10 آلاف نسخة دالة في الذاكرة. مع كائنات قليلة مفيش فرق محسوس؛ مع كائنات كتير جدًا الموضوع بيبان.
• .bind() بيرجّع دالة جديدة كل مرة بتناديه. لو ناديته جوّه دالة الرسم في React، انت بتعمل reference جديدة كل render، واللي بيكسر React.memo ويخلّي الكومبوننت الابن يعيد الرسم بدون لزمة. اعمل الـ bind مرة واحدة بره مسار الرسم.
• الدالة السهمية ثابتة الـ this، يعني مينفعش تستخدمها لمّا تكون فعلاً محتاج this ديناميكية، زي ميثود على prototype مفروض يشتغل على أي كائن يناديه. وكمان مينفعش تستخدمها مع new.
• الوضع الصارم strict mode بيخلّي this في الاستدعاء الحر undefined بدل window. ده مكسب: بيوقّعك بـ error واضح بدل ما يكتب على الكائن العام في صمت. بس لو عندك كود قديم بيعتمد على السلوك القديم، هيتكسر.

متى لا تشغّل بالك بالموضوع ده

مش كل كود محتاج تفكّر في this.

• لو بتكتب modules بدوال نقية بتاخد كل حاجة كـ arguments وبترجّع قيمة، this مش بتلمسك أصلاً.
• React بالـ hooks شالت this تقريبًا من كود الكومبوننت؛ لو مشروعك function components بس، الموضوع بيخصّك أقل بكتير.
• لو كل ميثوداتك بتتنادى دايمًا بصيغة obj.method() وعمرها ما بتتنقل كـ callback، القاعدة التانية كفاية ومش محتاج تعقّد.

الافتراض هنا إنك شغّال على JavaScript حديثة (ES2015 وأحدث) بـ strict mode مفعّل، وده الوضع الافتراضي جوّه أي module أو class.

المصادر

• MDN Web Docs — صفحة this وصفحة Arrow function expressions.
• ECMAScript Language Specification (ECMA-262) — قسم Execution Contexts و this binding.
• MDN Web Docs — Function.prototype.bind() وFunction.prototype.call().
• Kyle Simpson — كتاب «You Don't Know JS Yet: this & Object Prototypes».

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

دلوقتي افتح أقدم ملف فيه class في مشروعك. دوّر على أي ميثود بيتبعت كـ callback لـ addEventListener أو setTimeout أو .map. لكل واحدة اسأل سؤال واحد: لو الدالة دي اتنادت لوحدها، this هتبقى إيه؟ لو الإجابة «undefined وأنا محتاجها الكائن»، حوّلها لدالة سهمية أو ضيف .bind(this) في مكان التعريف. ابدأ بملف واحد النهاردة، وشغّل الاختبارات بعدها؛ لو عدّت، انت قفلت فئة كاملة من الـ bugs الصامتة.