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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۵ تیر ۱۳۹۶

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

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

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

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 زیاد مورد استفاده قرار میگرفت، بصورت زیر بود:

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 استفاده میکنیم:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++;
  }, 1000);
}

var p = new Person();

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

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

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

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

Pouria Rezaei

خیلی نکته خوبی رو اشاره کرده بودین, ممنون.

فائقه نامور

سلام
ممنون از توجه و همراهی شما.