آموزش ویژگی های ECMAScript 6 (جلسه 7) : معرفی Arrow function - قسمت 2

همونطور که اطلاع دارید در جلسه گذشته تعدادی نکته در مورد Arrow function ها خدمتتون عرض کردیم و شما رو با اونا آشنا کردیم. در این جلسه میخوایم دیگر ویژگی های این نوع توابع رو بررسی کنیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید در این تابع قصد داریم یک شئ رو برگشت بدیم و برای اینکار از return استفاده کردیم. همونطور که در جلسه قبل گفتیم اگر فقط یک دستور در بدنه تابع داشتیم، میتونیم دیگه از return استفاده نکنیم و {} رو نیز حذف کنیم. پس این کار رو انجام میدیم:

میبینید که موارد مورد نظر رو اعمال کردیم و حالا باید انتظار داشته باشیم که این تابع، شئ مورد نظر رو return کنه. ولی وقتی کد رو اجرا میکنید، این اتفاق صورت نمیگیره و با یک ارور مواجه خواهید شد. در کد بالا {} مربوط به شئ هست ولی موتور Javascript به اشتباه اون رو برای تابع در نظر میگیره و همونطور که میدونید نمیتونیم در تابع از : استفاده کنیم. پس ارور بصورت زیر نمایش داده میشه:

میبینید که به شما میگه اجازه استفاده از : رو ندارید. پس باید در این موارد از یک ترفند استفاده کنیم و اطراف شئ مورد نظر یک پرانتز قرار بدیم، پس کد مورد نظر بصورت زیر میشه:

به همین راحتی.

تاثیر Arrow function بر this

تا قبل از اینکه Arrow function ها مورد استفاده قرار بگیرن، هر تابع مقدار this مختص به خودش رو داشت و از این مورد زیاد برای کار با برنامه نویسی شئ گرا در Javascript مورد استفاده قرار میگرفت. کد زیر رو در نظر بگیرید:

همونطور که میبینید در خط 1 یک constructor بنام Person به وجود آوردیم و در خط آخر نیز با استفاده از کلمه کلیدی new یک نمونه جدید از اون ساختیم و درون متغیر p قرار دادیم. در خط 2 کلمه this به خود تابع Person مربوط میشه و با اینکار ویژگی age اون برابر با 0 قرار میگیره. بعد از اون یک setInterval قرار دادیم و درون اون یک تابع رو هر ثانیه اجرا میکنیم تا یکی یکی به age اضافه کنه و نقش بالا بردن سن رو ایفا کنه. در خط 5 از this.age استفاده شده و با استفاده از ++ در هر بار اجرا، یک واحد به اون اضافه خواهد شد. اما زمانی که این کد رو اجرا میکنیم، متوجه میشیم که کد ما درست کار نمیکنه و یجای کار مشکل داره. این مشکل به دلیل این هست که this در اینجا به تابع Person اشاره نمیکنه و بجای اون به شئ window یا Global object مربوط میشه. این مشکلی هست که خیلی با اون سر کار داشتیم و راه حلی که برای اون در ES3 و ES5 زیاد مورد استفاده قرار میگرفت، بصورت زیر بود:

میبینید که در خط 2 کلمه this رو درون متغیر that قرار دادیم و حالا میتونیم از that در جاهای دیگه هم استفاده کنیم. پس در خط 6 کلمه that به همون تابع Person مربوط میشه و کار به درستی انجام میشه. اما با اومدن Arrow function ها کار خیلی راحتتر شده و دیگه با چنین مشکلاتی روبرو نخواهیم شد. Arrow function ها کلمه this مربوط به خودشون رو به وجود نمیارن و بجای اون از this زمینه یا context فعلی که درون اون هستند، استفاده میکنند. پس کد اولیه رو بصورت زیر تغییر میدیم و از Arrow function استفاده میکنیم:

میبینید که در اینجا از Arrow function استفاده کردیم و با اینکار کلمه this به تابع Person اشاره میکنه و به ویژگی age دسترسی پیدا میکنیم و مشکل به همین راحتی حل میشه.

Arrow function ها ویژگی های زیاد دیگه ای هم دارند که خودتون میتونین اونا رو در این لینک و این لینک مطالعه کنید.

موفق و پیروز باشید.

یا علی