ویرگول
ورودثبت نام
Nima Mohamadian
Nima Mohamadian
خواندن ۳ دقیقه·۵ سال پیش

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

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

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

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

تعریف آبجکت person با دو مشخصه fullName و welcome
تعریف آبجکت person با دو مشخصه fullName و welcome

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

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

انواع روش های صدا زدن fullName و تابع welcome
انواع روش های صدا زدن fullName و تابع welcome

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

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

جایگزین کردن مقدار person.welcome با مقدارش
جایگزین کردن مقدار person.welcome با مقدارش

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

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

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

بایند کردن آبجکت person به welcomeFunction
بایند کردن آبجکت person به welcomeFunction

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

بایند کردن مقدار دلخواه به تابع welcomeFunction
بایند کردن مقدار دلخواه به تابع welcomeFunction


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

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

بایند کردن آبجکت ، دستکاری DOM با استفاده از جاواسکریپت
بایند کردن آبجکت ، دستکاری DOM با استفاده از جاواسکریپت


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

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

تعریف شی person این بار با یک مشخصه name که نکته داره
تعریف شی person این بار با یک مشخصه name که نکته داره

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

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

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

http://vrgl.ir/yy9ZN
http://vrgl.ir/zkV80
http://vrgl.ir/GaRXJ



Follow me on social media
Telegram
Facebook
Twitter
Linkedin
Virgool
javascriptbindthisبرنامه نویسیجاواسکریپت
توسعه دهنده جاواسکریپت
شاید از این پست‌ها خوشتان بیاید