آبجکت بدون اثر جانبی در جاواسکریپت

خوب همه ما با آبجکت ها توی جاواسکریپت آشنایی داریم. آبجکت تو زبان جاواسکریپت از جفت name & property ساخته میشه. از اونجا که همه چیز تو جاواسکرپیت از prototype ارث بری دارند، پس وقتی یک آبجکت، لیست یا رشته می‌سازیم، یکسری متد و ویژگی برای استفاده بر روی اون شی در اختیار ما قرار میده.

درواقع یک رشته (‌و هر شی دیگه تو جاواسکریپت) به همراه خودش تعداد زیادی ویژگی و متد داره که به اونها اثر جانبی Side-effects میگیم. (البته ممکنه این کلمه در اینجا براتون جدید و جالب باشه)

با این مقدمه بریم ببینیم این آبجکت بدون اثر جانبی در جاواسکریپت چی هست و چه استفاده‌ ای برای ما داره؟

آبجکت بدون اثر جانبی در جاواسکریپت
آبجکت بدون اثر جانبی در جاواسکریپت


به عنوان یک مثال ساده، لیست زیر رو در نظر بگیرید. این لیست بعد از تعریف ، شامل یک سری از خصوصیت ها میشه. مثلا همین خصوصیت پرکاربرد length که با گذاشتن یک نقطه بعد از لیست می‌تونیم بهش دسترسی داشته باشیم و تعداد آرایه های اون لیست رو به ما نشون بده. این ویژگی length از کجا اومده و چه طوری به همراه یک شی لیست که همین الان تعریفش کردیم وجود داره؟‌

ویژگی طول یک لیست
ویژگی طول یک لیست


خوب همون طور که گفتم همه چیز از prototype ساخته میشه. موضوع prototype یکم پیچیده است و تو این مقاله در موردش صحبت نمی‌کنم ولی در یک جمله:
وقتی تو جاواسکریپت یک شی جدید می‌سازیم (‌یک رشته، لیست، آبجکت و ...) در واقع داریم یک شی می‌سازیم که از کلاس prototype ارث بری داشته. پس یک سری ویژگی و خصوصیت، همراه خودش داره (‌مثل همون ویژگی length که توی لیست ها مثال زدم).

بریم به دستور ساخت آبجکت نگاهی بندازیم. برای این کار یک آبجکت خالی تعریف می‌کنیم:

ساختن یک آبجکت خالی
ساختن یک آبجکت خالی

وقتی که آبجکتی می‌سازیم ، جاواسکریپت اون رو به شکل زیر میبینه:

ساختن یک آبجکت خالی از دید جاواسکریپت
ساختن یک آبجکت خالی از دید جاواسکریپت

برای ساختن آبجکت myObj ، کد بالا فراخونی میشه. پس جاواسکریپت یک شی آبجکت می‌سازه که از prototype یک آبجکت ارث بری می‌کنه ( جمله سختی شد ، همون کدش بهتر مطلب رو می‌رسونه :))

خوب حالا که یک آبجکت به اسم myObj ساختیم بریم توی کنسول کروم و ببینیم این آبجکت ما چه خصوصیات و ویژگی هایی رو به همراه خودش داره:

ویژگی های شی آبجکت
ویژگی های شی آبجکت


به محض اینکه بعد از اسم آبجکت یک نقطه قرار میدیم یک لیست شامل انواع متدها و ویژگی های آبجکت باز میشه. می‌بینیم که چندین ویژگی برای شی myObj وجود داره. همه این ویژگی ها از prototype به ارث برده شده است!

حالا اگه بخواهیم آبجکتی بسازیم که این ویژگی هارو با خودش نداشته باشه باید چی‌کار کنیم؟

اگه به دستور ساختن آبجکت دقت کرده باشید،‌ از prototype استفاده کردیم. چه طوره که به جاش بیایم از null استفاده کنیم؟

prototype ساخت آبجکت بدون ارث بری از
prototype ساخت آبجکت بدون ارث بری از

این شکل از ساختن آبجکت باعث میشه ویژگی ها و متدهایی که لازم نداریم، اصلا وجود نداشته باشه. بریم همین موضوع رو در عمل ببینیم:

ساختن آبجکت با روش بدون حاشیه
ساختن آبجکت با روش بدون حاشیه

حالا این آبجکت رو توی کنسول کروم بررسی می‌کنیم:

چک کردن ویژگی های آبجکت بدون حاشیه در کنسول کروم
چک کردن ویژگی های آبجکت بدون حاشیه در کنسول کروم


خوب همونظور که می‌بینید بعد از گذاشتن نقطه، هیچ متد و ویژگی وجود نداره که نمایش داده بشه!

تبریک میگم! تونستیم یک آبجکت بدون هیچ side effect بنویسیم!

خوب این آبجکت بدون اثر جانبی چه استفاده‌ای داره؟

معمولا وقتی می‌خواهیم از آبجکت جاواسکریپت برای ذخیره دیتا استفاده کنیم نیازی به متدها و ویژگی های پیش فرض آبجکت نداریم. می‌تونیم با این ورش به سادگی آبجکتی بسازیم که هیچ گونه وابستگی به چیزی نداره !



سایر مقاله های من در ویرگول:

https://virgool.io/@novonimo/استراتژی-مناسب-گیت-kf6noyelifff
https://virgool.io/JavaScript8/معرفی-انواع-تست-فرانت-اند-zaz9e5gddhcn
https://virgool.io/JavaScript8/معرفی-storybookjs-ub1k1h88bda6



Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123