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

- visibility ۰ mode_comment

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

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

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

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

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 11)

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

تاثیر 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 ها ویژگی های زیاد دیگه ای هم دارند که خودتون میتونین اونا رو در این لینک و این لینک مطالعه کنید.

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

یا علی

comment دیدگاه کاربران
ارسال نظرات

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