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

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

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

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


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

تابع ساده f با یک مقدار this.fullName
تابع ساده f با یک مقدار this.fullName

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

گره زدن آبجکت به تابع f  و صدا زدن تابع g
گره زدن آبجکت به تابع f  و صدا زدن تابع g

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

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

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

دوباره بایند کردن مقدار fullName به تابع g و صدا زدن تابع h
دوباره بایند کردن مقدار fullName به تابع g و صدا زدن تابع h

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

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

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

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

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

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


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

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

آبجکت o  با دو تابع معمولی و تابع arrow که می‌خواهیم رفتار this رو بررسی کنیم
آبجکت o با دو تابع معمولی و تابع arrow که می‌خواهیم رفتار this رو بررسی کنیم

تابع معمولی رو قبلا هم باهاش کار کردیم و دیدیم که وقتی توی اسکوپش از 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 بیشتر آشنا شده باشید. البته این نکات به همین جا ختم نمیشه اما با همین نکات دید خوبی به این دو موضوع پیدا می‌کنید. نکات تکمیلی رو هم تو نوشته های بعدی ارائه می‌کنم.


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

http://vrgl.ir/BwPRq
http://vrgl.ir/kAHpj
http://vrgl.ir/u1wC0



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