کلیدواژه ی this در جاوا اسکریپت

0 901

سلام خدمت شما خوانندگان گرامی، در این مقاله قصد داریم در مورد کلیدواژه ی this در جاوا اسکریپت صحبت کنیم. مطمئن هستم اگر با زبان برنامه نویسی دیگری کار کرده باشید که دارای مباحث شیء گرایی باشد، با کلیدواژه ی this نیز آشنایی دارید. این کلیدواژه در جاوا اسکریپت تفاوت آنچنانی با زبان های برنامه نویسی دیگر ندارد بنابراین اگر با آن آشنایی دارید کار شما بسیار راحت خواهد بود.

کلیدواژه ی this چیست؟

ابتدا به شیء person که قبلا تعریف شده نگاهی بیندازیم:

مشاهده ی خروجی کد در ادیتور آنلاین جاوا اسکریپت

در اینجا خروجی برای ما اهمیت چندانی ندارد بلکه خود کد و کلیدواژه ی this در مرکز توجه ما است.

به زبان ساده و در حالت کلی، کلیدواژه ی this به شیء ای اشاره می کند که به آن تعلق دارد (در آن قرار دارد).

البته مقادیر this بر اساس جایی که استفاده شده است متفاوت است:

  • اگر this در یک متد استفاده شود، به شیء ای اشاره می کند که صاحب آن متد است (owner object).
  • اگر this به تنهایی استفاده شود، به شیء سراسری جاوا اسکریپت (global object) اشاره می کند.
  • اگر this در یک تابع استفاده شود، باز هم به شیء سراسری جاوا اسکریپت (global object) اشاره می کند.
  • اگر در حالت strict mode باشیم و از this در یک تابع استفاده کنیم، با مقدار undefined مواجه خواهیم شد.
  • اگر this در یک event استفاده شود، به عنصری اشاره می کند که آن event را دریافت کرده است.
  • متدهایی مانند ()call و ()apply می توانند this را به هر شیء ای برگردانند.

کلیدواژه ی this در متدها

همانطور که در بالاتر گفتیم، کلیدواژه ی this  در یک متد، به صاحب آن متد بر میگردد. در ابتدای مقاله مثالی از شیء ای به نام person به شما دادیم. کلمه ی this در آن مثال به شیء person برمیگردد. چرا؟ به دلیل اینکه شیء person صاحبِ متدِ fullName است. دوباره به این قسمت از کد نگاهی بیندازید:

متد ()fullName داخل شیء person (شیء ای که صاحب متد fullName است) تعریف شده است بنابراین کلیدواژه ی this به این شیء بر میگردد.

کلیدواژه ی this به صورت تنها

ما گفتیم که this به شیء صاحب بر میگردد اما زمانی که به تنهایی استفاده شود چطور؟ تمام متدها در شیء سراسری جاوا اسکریپت قرار دارند بنابراین در چنین حالتی this نیز به شیء سراسری (Global object) اشاره می کند.

ممکن است برایتان سوال پیش آمده باشد که شیء سراسری یا Global object چیست یا دقیقا به چه چیزی بر میگردد. اگر بخواهم به زبان ساده بگویم، می گویم در اکثر اوقات جاوا اسکریپت در پنجره ی مرورگر کاربران اجرا می شود و به همین خاطر در یک مرورگر، Global object همان [object Window] است. به مثال زیر دقت کنید:

خروجی این کد عبارت [object Window] خواهد بود.

نکته: اگر در strict mode باشید، this به صورت تنها، باز هم به [object Window] اشاره می کند بنابراین می توان کد بالا را اینطور نیز نوشت:

کلیدواژه ی this در توابع

همانطور که قبلا گفتیم اگر در حالت عادی در جاوا اسکریت از کلیدواژه ی this در توابع استفاده کنیم، به صاحب آن تابع اشاره می کنیم که در واقع همان شیء سراسری، یعنی [object Window]، است. مثال:

خروجی این کد عبارت “[object Window]” خواهد بود.

نکته: اگر در حالت strict mode باشید، مقدار this در توابع undefined خواهد بود. اگر مثال بالا را اینطور بنویسیم:

خروجی عبارت undefined خواهد بود.

کلیدواژه ی this در Event Handler ها

کلیدواژه ی this در event handler های HTML به همان عنصری اشاره دارد که event (رویداد) را دریافت کرده است. در رابطه با رویداد ها بعدا صحبت خواهیم کرد اما فعلا مثالی از آن را ببینید:

مشاهده ی خروجی این کد تنها در ادیتور آنلاین جاوا اسکریپت امکان پذیر است.

زمانی که به  ادیتور آنلاین جاوا اسکریپت در لینک بالا رفتید، روی دکمه ی مورد نظر کلیک کنید و می بینید که دکمه حذف می شود. در این مثال توجه خاصی روی this داشته باشید؛ عنصر <button> دریافت کننده ی رویداد (event) بود و میبینید که دستور جاوا اسکریپت باعث حذف همان شد.

کلیدواژه ی this در اشیاء

در مثال های زیر کلیدواژه ی this به شیء person اشاره می کند چرا که این شیء صاحب توابع مربوطه است:

خروجی این کد [object Object] است.

مثال دوم:

خروجی این کد عبارت “John Doe” خواهد بود.

به عبارت دیگر this.firstName یعنی خصوصیتی به نام firstName که در this (شیء person) قرار دارد.

کلیدواژه ی this با توابع ()call و ()apply

در مورد توابع ()apply و ()call در قسمت های بعدی به طور کامل آشنا خواهیم شد اما به صورت خلاصه می گویم: کار این توابع این است که یک شیء را می گیرند و به عنوان یک آرگومان به شیء دیگری می دهند. به مثال زیر توجه کنید:

خروجی این کد عبارت “John Doe” خواهد بود.

با اینکه در این مثال کلیدواژه ی this در person1 قرار دارد اما باز هم به person2 اشاره می کند چرا که person2 به عنوان آرگومان به آن داده شده است.

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش جاوا اسکریپت | Javascript به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort