همونطور که اطلاع دارید در جلسه گذشته تعدادی نکته در مورد Arrow function ها خدمتتون عرض کردیم و شما رو با اونا آشنا کردیم. در این جلسه میخوایم دیگر ویژگی های این نوع توابع رو بررسی کنیم. کد زیر رو در نظر بگیرید:
1 2 3 4 5 6 7 | var getPerson = function() { return { id: 1, name: 'Mohammad', gender: 'male' } } |
همونطور که میبینید در این تابع قصد داریم یک شئ رو برگشت بدیم و برای اینکار از return استفاده کردیم. همونطور که در جلسه قبل گفتیم اگر فقط یک دستور در بدنه تابع داشتیم، میتونیم دیگه از return استفاده نکنیم و {} رو نیز حذف کنیم. پس این کار رو انجام میدیم:
var getPerson = () => { id: 1, name: 'Mohammad', gender: 'male' }; |
میبینید که موارد مورد نظر رو اعمال کردیم و حالا باید انتظار داشته باشیم که این تابع، شئ مورد نظر رو return کنه. ولی وقتی کد رو اجرا میکنید، این اتفاق صورت نمیگیره و با یک ارور مواجه خواهید شد. در کد بالا {} مربوط به شئ هست ولی موتور Javascript به اشتباه اون رو برای تابع در نظر میگیره و همونطور که میدونید نمیتونیم در تابع از : استفاده کنیم. پس ارور بصورت زیر نمایش داده میشه:
میبینید که به شما میگه اجازه استفاده از : رو ندارید. پس باید در این موارد از یک ترفند استفاده کنیم و اطراف شئ مورد نظر یک پرانتز قرار بدیم، پس کد مورد نظر بصورت زیر میشه:
var getPerson = () => ({ id: 1, name: 'Mohammad', gender: 'male' }); |
به همین راحتی.
تا قبل از اینکه Arrow function ها مورد استفاده قرار بگیرن، هر تابع مقدار this مختص به خودش رو داشت و از این مورد زیاد برای کار با برنامه نویسی شئ گرا در Javascript مورد استفاده قرار میگرفت. کد زیر رو در نظر بگیرید:
1 2 3 4 5 6 7 8 9 | function Person() { this.age = 0; setInterval(function growUp() { this.age++; }, 1000); } var p = new Person(); |
همونطور که میبینید در خط 1 یک constructor بنام Person به وجود آوردیم و در خط آخر نیز با استفاده از کلمه کلیدی new یک نمونه جدید از اون ساختیم و درون متغیر p قرار دادیم. در خط 2 کلمه this به خود تابع Person مربوط میشه و با اینکار ویژگی age اون برابر با 0 قرار میگیره. بعد از اون یک setInterval قرار دادیم و درون اون یک تابع رو هر ثانیه اجرا میکنیم تا یکی یکی به age اضافه کنه و نقش بالا بردن سن رو ایفا کنه. در خط 5 از this.age استفاده شده و با استفاده از ++ در هر بار اجرا، یک واحد به اون اضافه خواهد شد. اما زمانی که این کد رو اجرا میکنیم، متوجه میشیم که کد ما درست کار نمیکنه و یجای کار مشکل داره. این مشکل به دلیل این هست که this در اینجا به تابع Person اشاره نمیکنه و بجای اون به شئ window یا Global object مربوط میشه. این مشکلی هست که خیلی با اون سر کار داشتیم و راه حلی که برای اون در ES3 و ES5 زیاد مورد استفاده قرار میگرفت، بصورت زیر بود:
1 2 3 4 5 6 7 8 9 10 | function Person() { var that = this; that.age = 0; setInterval(function growUp() { that.age++; }, 1000); } var p = new Person(); |
میبینید که در خط 2 کلمه this رو درون متغیر that قرار دادیم و حالا میتونیم از that در جاهای دیگه هم استفاده کنیم. پس در خط 6 کلمه that به همون تابع Person مربوط میشه و کار به درستی انجام میشه. اما با اومدن Arrow function ها کار خیلی راحتتر شده و دیگه با چنین مشکلاتی روبرو نخواهیم شد. Arrow function ها کلمه this مربوط به خودشون رو به وجود نمیارن و بجای اون از this زمینه یا context فعلی که درون اون هستند، استفاده میکنند. پس کد اولیه رو بصورت زیر تغییر میدیم و از Arrow function استفاده میکنیم:
1 2 3 4 5 6 7 8 9 | function Person(){ this.age = 0; setInterval(() => { this.age++; }, 1000); } var p = new Person(); |
میبینید که در اینجا از Arrow function استفاده کردیم و با اینکار کلمه this به تابع Person اشاره میکنه و به ویژگی age دسترسی پیدا میکنیم و مشکل به همین راحتی حل میشه.
Arrow function ها ویژگی های زیاد دیگه ای هم دارند که خودتون میتونین اونا رو در این لینک و این لینک مطالعه کنید.
موفق و پیروز باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 289