شی گرایی قسمت چهارم (ES6 Class)

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

توی این قسمت میخوایم مورد دوم، یعنی ES6 class رو بررسی کنیم.

از ES6 به بعد سینتکس جدیدی برای هندل کردن شی گرایی توی جاواسکریپت معرفی شد، در واقع میخواستن که مثل بقیه زبون ها جاواسکریپت هم از کلیمه کلیدی class پشتیبانی کنه و کد هامون تروتمیز تر باشه اما این کلاس ها توی جاواسکریپت مثل کلاس های تو سایر زبان های برنامه نویسی (مثل ++C یا جاوا یا ...) نیستن

در واقع فقط ظاهرش شیه class شده (در اصلاح بهش میگن syntactical sugar) ولی پشت قضیه همون شکل یک یعنی به صورت constructor function داره هندل میشه، پس اگه اون رو خوب متوجه شدید اینجا صرفا سینتکسش تغییر کرده

دقیقا هرچیزی که توی constructor function صدق میکرد توی ES6 Class هم صدق میکنه

توی مثال زیر Person رو به دو روش نوشتیم و هردو دقیقا به یک شکل هستن با سینتکس متفاوت :

اما وقتی از ES6 Class استفاده میکنی به نکات زیر توجه کن:

☝نکته اول: توی بدنه class ها، کد ها همیشه strict mod اجرا میشن

☝نکته دوم: class ها هم عین توابع first-class citizen هستن، یعنی چی؟
یعنی مثل یک متغییر هم میشه return شون کرد و هم به توابع ارسالشون کرد

☝نکته سوم: class ها مثل توابع hoisting نمیشن (توی این مقاله کامل hoisting رو شرح دادم) خیلی کوتاه بگم hoisting چیه ؟ مکانیزمی که متغییر ها ، توابع و .... رو به بالاترین سطح خودشون میبره و میتونیم قبل از تعریفشون بهشون دسترسی داشته باشیم
البته کلاس ها هم hositing میشن ها ولی قبل کلاس قابل دسترسی نیستن و وقتی کد رو اجرا کنید به ارور میخورید، پس همون بگیم نمیشن بهتره
مثال زیر رو ببینید اگه اجراش کنید به این ارور برخورد میکنید

ReferenceError: Cannot access 'Person' before initialization

همچنین ما میتونیم به دو صورت کلاس هارو بنویسیم

//Class declarations
class Person { }

//Class expressions
const Person = class { }

حالا ممکنه سوال پیش بیاد از ES6 Class استفاده کنیم یا constructor function ؟؟؟🤔

ببینید به صورت عامیانه و خب غالبا از ES6 Class استفاده کنیم بهتره ولی(نظر شخصی) به شرطی که بدونیم پشت قضیه چه خبره، اینطوری هم میدونی چی کد میزنی هم میدونی اون پشت شی گرایی چطور داره هندل میشه و هم رفع باگ بهتری انجام میدی چون ES6 Class فقط یک سینتکس هست

امیدوارم بدردت خورده باشه❤️

کانال تلگرامم 👈 LeanByLearn@