آموزش ویژگی های 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

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

فائقه نامور

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

نیاز به لاگین

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