بایند کردن آبجکت در جاواسکریپت

یکی از قسمت های گیج کننده جاواسکریپت bind و this هست. بایند کردن آبجکت در جاواسکریپت رو با یک مثال ساده توضیح میدم و در آخر یک مثال از دنیای واقعی براتون میزنم.

آبجکت ساده زیر رو در نظر بگیرید:

این آبجکت دوتا مشخصه fullName و welcome داره که welcome به صورت تابع هست. this توی این تابع به صورت خیلی مشخص داره به fullName که خودش توی همین آبجکت هست اشاره میکنه ( ظاهرا اینجوریه !)

می‌خواهیم با روش های مختلف این تابع داخلی رو صدا بزنیم تا مقدار خروجی رو ببینیم:

خط اول که هیچی خیلی ساده است، مقدار fullName رو چاپ می‌کنه.
خط دوم، تابع welcome صدا زده میشه پس لازم هست که مقدار this رو داشته باشه ، مقدار this اینجا به person object اشاره می‌کنه و مقدار fullName هم توی این آبجکت تعریف شده .
خط سوم اما نکته داره : ما اومدیم یک مقدار ثابت ساختیم و همون کد خط دوم رو بهش اختصاص دادیم و در خط بعدی اونو صدا زدیم. اما نتیجه این دفعه کاملا با چیزی که انتظار داشتیم تفاوت داشت. چرا ؟

برای اینکه دلیل undefined شدنش رو بدونید، مقدار تابع welcome رو جایگزین کنید:

الان this داره به چی اشاره می‌کنه ؟‌
اینجا دیگه نه آبجکتی هست نه fullName پس کاملا طبیعی هست که undefined باشه.

اینجا this داره به global object اشاره می‌کنه و global object چیزی به اسم fullName توی خودش نداره پس مقدارش undefined میشه. global object توی محیط مرورگر window هست و توی محیط node مقدار global هست.

اما راه حلش چیه؟ اگه بخواهیم بهش بگیم که this بجای global object، مقداری دلخواه رو بگیره باید چیکار کنیم؟‌ بایند کردن آبجکت در جاواسکریپت!

بهش گفتیم وقتی داری دنبال this.fullName می‌گردی برو به آبجکت person و اونجا دنبالش بگرد! به اصطلاح آبجکت person رو به تابع welcomeFunction گره زدیم و متغیر boundWelcomeFunction رو ساختیم. می‌تونیم همین کارو با مقدار دلخواه fullName انجام بدیم:

مثال از دنیای واقعی

وقتی که می‌خواهیم با DOM (مرورگر) کار کنیم this به آبجکت window اشاره می‌کنه ( توی Node به global و توی محیط browser به window) و ما برای اینکه بتونیم از آبجکت خودمون استفاده کنیم عمل بایند کردن رو انجام میدیم.

نکته کنکوری :)

یک نکته جالب که ممکنه تو مصاحبه های جاواسکریپتی اونو بپرسند رو میخواهم اینجا بگم. همین آبجکت person رو اگه یه تغییر کوچیک بهش بدیم و fullName رو به name تغییر بدیم چه مقداری بعد از صدا زدن welcomeFunction چاپ میشه؟

اگر فکر می‌کنید که همچنان Hi undefined چاپ میشه باید بگم که یه نکته ریز رو دقت نکردین. شی عمومی window که this به اون اشاره داره یک مقدار name داره که یک string خالی هست پس خروجی کنوسول مقدار Hi میشه!

برای دیدن مقدار شی window کافیه که توی کنسول مرورگر خودتون بنویسد this و enter رو فشار بدید.

سایر مقاله های من در ویرگول :

Follow me on social media
Telegram
Facebook
Twitter
Linkedin
Virgool