this keyword in JavaScript

 

this keyword in JavaScript

اولا ايه ال this دي وليه قيمتها متغيرة كل شوية؟ و ايه الفرق لما استخدمها ف regular function، arrow function، method؟

خلينا نبدا ب ايه هي ال this و ازاي بتتكون.

ال this هي Reference بيشاور علي ال object الحالي.

طيب بتتكون ازاي؟ بتتكون اول ما يحصل creation ل execution context في ال memory.

يعني ايه الكلام ده؟ ببساطة لما يحصل call ل اي function ، بتكريت ف الميموري execution context خاص بيها، هو عبارة عن حيز تنفيذي ليها ، بيبقي عادة شايل حاجات من ضمنها ال this.

عشان كده هتلاقي ال this ليها علاقة دايما ب أنواع ال functions سواء العادية او ال arrow او method.

كلام جميل، فين ال object فالموضوع بقا ؟

لو جربت تطبع this ف سكريبت فاضي، هيطبعلك ال window. ليه حصل كده؟

اولا، اول ما انت بتعمل js file، بيتكريت global execution context ف الميموري، وبالتالي هيتكريت this.

ال global ده اللي هو ال window object.

يبقي this بتشاور علي ال object الحالي اللي هو ال window.

دي اول حالة، و اظن بسيطة.

نعلي شوية.. لو عملت function عادية خالص في ال global..

مهم تعرف قبل ما اكمل، ان اي حاجة بتكتبها ف ال global بتدخل جوه ال window.

يعني ال function أللي انا عملتها دي حاليا موجودة ف ال Window، و لما بعمل call، اللي عملها call فعليا هو ال Window.

بمجرد ما اعمل call، بيتكريت execution context خاص بيها في ال memory، و بيتكرت بالتبعيه this زي م قلنا.

و this بتشاور علي ال object الحالي اللي نادي ع ال function، اللي هو ال window.

ودي تاني حالة ل this.

الحالة التالتة لما اطبع this جوه method، زي م احنا عارفين ال method هي function جوه object.

هنسميه obj1 للتمييز فقط.

اول ما اعمل call لل function دي، هتكريت execution context، و هتكريت this، و نفس الكلام ال this هتشاور علي caller object اللي هو ال obj1.

النوع الرابع لو بعمل event علي element معين
علي سبيل المثال لو عندي input و عملتله select في js ، مهم تعرف أن اي html element في js بيكون obj تمام .. تمام

ال input بتاعنا ده لو جينا عملنا عليه event بي fire function و طبعنا جوا ال function قيمة ال this
هتطبعلنا ال element ده ليه ؟ لان احنا قلنا ال this هي reference to the caller object ومين ال object اللي عمل fire لا function ؟! هو ال html element

اخر نوع هو ال this اللي ف ال arrow function.

اهم معلومة لازم تعرفها، ان ال arrow function لما يتعملها call، ال execution context بتاعها اساسا مش بيعمل this.

اذا كده، ال arrow function معندهاش this.

هتتصرف ازاي بقا؟ هتروح تستعين ب ال scope chain بتاعها.

ال scope chain هو جزء من الحاجات اللي جوه ال execution context.

اختصارا، هو وظيفته انه بيحدد العلاقات بين ال functions و بعضها، مين parent ل مين وهكذا.

ف ال arrow function بمساعدة ال scope chain، هتعمل look up.

يعني تبص ع ال parent بتاعي، عنده this؟ اه خلاص، هنورثها. معندوش؟ نشوف ال parent الاكبر وهكذا، لغاية ما توصل ل this تقدر تورثها.

لذلك، ال arrow متقدرش من نفسها تحدد ال this، لان معندهاش اصلا، هي بتشوف ال this بتاعت ال parent و تتعامل علي هذا الاساس. (طبعا في اختلافات بين لو شغال sloppy mode , strict mode )