عملکرد‌های متفاوت this در زبان JavaScript

عملکردهای متفاوت this در زبان javascript

this یکی از کلمه‌های کلیدی زبان JavaScript است که اگر آن را به‌خوبی درک نکنید، می‌تواند برای شما مشکل‌ساز شود. البته این کلمه‌ی کلیدی بخشی اساسی از زبان‌های برنامه‌نویسی شی‌گرا است اما عملکرد متفاوتی در زبان‌های مختلف دارد. مثلا رفتار this در JavaScript متفاوت از this در زبان Java یا self در Python است.

this در زبان JavaScript به آبجکت اشاره دارد، به عبارت دیگر this در یک تابع زبان JavaScript به آبجکتی اشاره دارد که آن را در بر گرفته است و value یا همان مقدار this به نحوه‌ی استفاده‌ی آن بستگی دارد.

۱) عملکرد this در method

فانکشنی که در که یک آبجکت تعریف شده باشد، یک متد (method) به‌حساب می‌آید و زمانی‌که از this در یک متد استفاده شود، به آبجکت آن اشاره دارد. بیایید این موضوع را با یک مثال ساده درک کنیم:

استفاده از کلمه‌ کلیدی this در یک method

کلمه‌ی کلیدی this در متد greetings() به آبجکت greet اشاره دارد.

۲) عملکرد this در function

ممکن است درک عملکرد this در فانکشن‌ها کمی سخت‌تر بقیه موارد باشد اما سعی می‌کنیم با یک مثال، درک آن را ساده‌تر کنیم:

استفاده از کلمه‌ کلیدی this در یک function

در کد بالا یک فانکشن با نام dostuff() وجود دارد که مقدار this را برای ما در کنسول مرورگر چاپ می‌کند. مقدار this در این فانکشن یک آبجکت با نام Window است زیرا این فانکشن توسط یک آبجکت فراخوانی نشده و حتی اگر متغیری خارج از scope تعریف شود نیز به همین صورت است و به آبجکت Window که یک آبجکت global است، پیوست (attach) می‌شود (در بخش بعدی این موضوع را بهتر درک خواهید کرد).

البته کلمه‌ی کلیدی this می‌تواند در حالت strict، عملکرد متفاوتی نیز داشته باشد. به مثال زیر دقت کنید:

استفاده از کلمه‌ کلیدی this در یک function در حالت strict mode

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

۳) عملکرد this در خارج از function

اگر از کلمه کلیدی this در خارج از یک فانکشن استفاده کنیم، مقدار آن برابر با آبجکت Window خواهد بود و می‌توانید به خصوصیت‌های آبجکت Window دسترسی داشته باشید. برای مثال:

استفاده از کلمه‌ کلیدی this در خارج از یک function

۴) عملکرد this در event

تعامل کاربر در صفحه‌های وب از طریق eventهایی انجام می‌شود که بر روی المنت‌های صفحه‌ی وب تعریف شده‌اند و زمانی‌که کاربر تغییری در صفحه ایجاد کند، باعث اجرای یک یا حتی چند event مختلف می‌شود. انواع مختلفی از eventها در یک صفحه‌ی وب وجود دارد، برای مثال می‌توانیم به evenetهای کلیک، فشردن یک کلید یا بارگیری صفحه‌ی وب اشاره داشته باشیم. کلمه‌ کلیدی this در یک event به المنت HTML‌ی اشاره دارد که آن event بر روی آن تعریف شده است. برای مثال:

<button onclick="doSomething(this)"> CLICK ME!</button>
میم dom

هر زمانی‌که بر روی این دکمه کلیک شود، فانکشن doSomething() اجرا می‌شود و اگر آن فانشکن حاوی this باشد، به المنتی اشاره می‌کند که آن event را اجرا کرده است زیرا آن المنت یک آبجکت در DOM (Document Object Model) به‌حساب می‌آید.

برای کسب اطلاعات بیشتر از کلمه کلیدی this در زبان JavaScript می‌توانید به مستندات آن در MDN مراجعه کنید.

منبع: https://rylexr2678.hashnode.dev/what-is-this-in-javascript

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi

همراه شما هستیم

در خصوص سفارش یا استفاده از سرویس‌ها سوالی دارید؟
تلفن واحد فروش:
۰۲۵-۳۳۵۵۷۶۱۹ (روزهای کاری ۹ الی ۱۷)
تلفن واحد فروش: ۳۳۵۵۷۶۱۹-۰۲۵ (روزهای کاری ۹ الی ۱۷)