با bind و this آشتی کنیم

چرا اسم این نوشته رو با bind و this آشتی کنیم گذاشتم؟‌ چون این قسمت از جاواسکریپت برای مبتدی ها پیچیده به نظر می‌رسه و معمولا سراغش نمیرن. با این نوشته کوتاه و مثال های ساده که استفاده کردم امیدوارم که دید خوبی به bind و this پیدا کنید.

به این تابع دقت کنید:

اما چرا undefined رو میده؟
تابع f مقدار this.fullName رو برمیگردونه و this به شی window اشاره می‌کنه و چون fullName رو پیدا نمیکنه (مقدار fullName رو جایی تعریف نکردیم)، undefined برمیگردونه. چاره اش چیه ؟‌ باید مقدار fullName رو به تابع گره بزنیم ( به تابع بگیم که fullName چی هست):

حالا مقدار fullName رو به تابع f دادیم و بهش گفتیم که this.fullName چی هست. پس وقتی تابع g رو صدا میزنیم و از خروجیش لاگ می‌گیریم، توقع داریم که Nima Mohamadian در کنسول چاپ شده باشه.

دو بار گرده زدن، چه تاثیری داره؟

نکته: اگه دوباره مقداری رو به تابع g گره بزنیم چی میشه؟

می‌بینیم که مقدار اسم جدید name اعمال نشد چون قبلا عمل بایند کردن رو انجام داده بودیم.

رفتار this رو بیشتر بررسی کنیم

یک آبجکت به اسم o تعریف کردیم. این آبجکت fullName و تابع f و g رو همراه خودش داره.

کنسول لاگ اولی چرا Ali رو چاپ می‌کنه ؟‌
خوب بریم ببینیم این this چیکار می‌کنه؟
این this عزیز میاد توی آبجکتی که صداش زدیم میگرده ببینه چیزی به اسم fullName هست یا نه
و میبینه که بعله آبجکت o مقدار fullName رو و ازش استفاده می‌کنه.

اما در مورد کنسول لاگ دوم چی؟
توی آبجکت o دنبال تابع g میگرده و پیداش میکنه. حالا دنبال fullName توی o میگرده ؟ نه دیگه
الان دیگه کاری به o نداره و توی g دنبالش می‌گرده که چون قبلا بهش بایند کردیم همون مقدار Nima رو برمیگردونه.

این this توی arrow function چه طوری کار میکنه؟

یک آبجکت به اسم o می‌سازیم که دوتا عضو داره، اولی تابع معمولی و دومی arrow function:

تابع معمولی رو قبلا هم باهاش کار کردیم و دیدیم که وقتی توی اسکوپش از this استفاده می‌کنیم ، اون this به خود شی سازنده اش اشاره می‌کنه پس طبیعی هست که لاگ اولی true باشه و دومی false باشه.

اما این موضوع توی arrow function متفاوت هست. this اینجا دیگه به خود آبجکت سازنده اشاره نمی‌کنه و به اسکوپ global که همون شی window در محیط browser  و global در محیط node هست اشاره می‌کنه.

بد نیست که این نکته رو به زبان اصلی هم بشنوید:

With arrow function "this" is bound to enclosing scope at creation time and can not be changed by bind, apply or call methods. The arrow function attached to "o" was created in the scope of "window" and run in the scope of "o"

امیدوارم که با این مثال با this و bind بیشتر آشنا شده باشید. البته این نکات به همین جا ختم نمیشه اما با همین نکات دید خوبی به این دو موضوع پیدا می‌کنید. نکات تکمیلی رو هم تو نوشته های بعدی ارائه می‌کنم.

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

Follow me on social media
Telegram
Facebook
Twitter
Linkedin
Virgool