تفاوت بین arrow function و normal function (توابع عادی)

Arrow function ها در اکما اسکریپت ۲۰۱۵ یا ES2015 به عنوان یک سینتکس مختصر معرفی شدند. آیا من می توانم تمام توابع عادی (Normal Function) را با توابع فلشی (Arrow Function) جایگزین کنم؟ به مثال های زیر توجه کنید:

توابع سازنده یا همان Constructor Function

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

متدهای Prototype

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

متدهای موجود در اشیاء (Objects)

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

توابع کال بک (Callbacks)

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

بهتره در ابتدا یک نکته را خدمت شما عرض کنم که در وضعیت عادی شما نمی توانید بدون تمرکز و بررسی، تمامی توابع عادی (Function Declaration) را با توابع فلشی (Arrow Function) جایگزین کنید. این جایگزینی تنها زمانی قابل انجام است که شما نخواهید از کلمه کلیدی this و همچنین دستور new استفاده کنید.

برای شفاف شدن درک این موضوع، به رفتار و عملکرد اینگونه توابع می پردازم:

کلمه کلیدی this و arguments

در توابع فلشی (Arrow Functions)  کلمه کلیدی this، به مقدار پارامتر یا آرگومان ارسالی اشاره دارد در حالیکه در توابع عادی (Function Declaration)، کلمه کلیدی this به مقادیر موجود در تابع اشاره می کند.

اجازه بدهید با ذکر یک مثال این تفاوت را نشان دهم:

// Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

اگر این تابع را خروجی بگیرید مقدار نهایی که در خط انتهایی چاپ می شود برابر عدد ۴۲ خواهد بود. زیرا در توابع عادی پارامترها به صورت خودکار به عنوان آرگومان ارسال نمی شوند و منظور از کلمه کلیدی this مقدار foo ای است که درون خود تابع createObject وجود دارد.

حال اگر همین مثال را با استفاده از Arrow Function ها مطرح کنیم:

// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

خروجی آن برابر است با مقدار ۲۱. زیرا در این حالت منظور از this دقیقا اشاره کردن به مقدار پارامترهایی است که از طریق آرگومان ارسال شدند.