Mohammadizanloo
Mohammadizanloo
خواندن ۳ دقیقه·۲ سال پیش

‫Prototype پترن در JavaScript

سلام :) امروز اومدم تا شمارو با یک دیزاین پترن دیگه آشنا کنم به اسم Prototype که این دیزاین پترن کمک میکنه که به راحتی property آبجکت هایی که از یک نوع هستند رو به اشتراک بزاریم. و همچنین تا حدودی شمارو با prototype chain توی جاوااسکریپت آشنا میکنم که در واقع باهاش میتونین پشت صحنه خیلی از چیز ها توی جاوااسکریپت رو ببینید

ما توی برنامه هامون خیلی پیش میاد که آبجکت هایی داشته باشیم که از یک نوع هستند که ما معمولا برای ایجاد چنین آبجکت هایی از قابلیت class که توی es6 اضافه شد استفاده میکنیم :

فرض کنید ما میخواییم توی برناممون تعدادی سگ داشته باشیم ، برای اینکار اول یک class به اسم Dog ایجاد میکنیم و بعد از روی اون سگ های جدیدی میسازیم که فعلا سگ هایی که میسازیم فقط میتونن پارس کنن :

توجه کنین که تمامی property هایی که اینجا داریم (bark و name ) به صورت اتوماتیک توسط جاوااسکریپت به prototype های کلاس Dog اضافه شدن :

نکته : مقدار __proto__ داره همون خروجی prototype کلاس Dog اشاره میکنه چون از روی اون ساخته شده و از اونجا که توی جاوااسکریپت برای دسترسی به یک property از prototype chain استفاده میکنه ( یعنی هی توی prototype های آبجکتش میگرده و به لایه های پایینتر میره تا شاید اونجا یه همچین property ای تعریف شده باشه) ما میتونیم به method های کلاس Dog دسترسی داشته باشیم.

وقتی ما با آبجکت هایی از یک نوع کار میکنیم prototype ها خیلی میتونن به ما کمک کنن و برای مواقعی که میخواییم به آبجکت هایی که از یک نوع هستند method یا property ای اضافه کنیم میتونن کار مارو خیلی ساده کنن

فرض کنید ما میخواییم به تمامی سگ هامون یک method جدید اضافه کنیم که توی اون کار جدیدی بتونن انجام بدن

همینطور که میبینین ما یک method جدید به prototype کلاس Dog اضافه کردیم تا همه شئ های جدیدی که از روی اون ساخته شدن این method بهشون اضافه بشه پس در واقع زمانی که ما داریم متد های مختلفی توی بدنه class تعریف میکنیم ما مستقیما داریم به prototype های اون ، method های جدیدی اضافه میکنیم که یکم تمیز تر از دستی مقدار دادن هست ( مثل همین متد play که دستی مقدارش رو اضافه کردیم )

اما ما توی این مثالمون فقط به __proto__ شئ های جدیدی که ساختیم کار داشتیم ( که همون کلاس Dog میشه ) بیایید یک کلاس جدید بسازیم که اون ارث بری بکنه از کلاس Dog

بنظرتون الان مقدار __proto__ متغیر dog1 چیه؟ بزارید تو عکس پایین ببینیم مقدارش رو :

فکر میکنم الان فهمیدید جاوااسکریپت چجوری داره ارث بری هاش رو انجام میده و یه جورایی پشت صحنه اون رو تونستیم ببینیم

یک راه ساده برای ارث بری کردن مستقیم از یک آبجکت دیگه استفاده از Object.create که این اجازه رو به ما میده

بیایید یکم دیگه کنجکاوی کنیم بنظرتون مقدار __proto__ متغیر pet1 چیه؟

همینطور که میبینین مقدار __proto__ متغیر pet1 دقیقا برابر با متغیر dog هست حتی به صورت دستی هم میتونیم اینکار رو بکنیم

سخن پایانی

مرسی که وقت گذاشتید و این مطلب رو تا اینجا خوندید :) اگه میخوایید بیشتر راجب این موضوع بدونید پیشنهادم این هست که حتما این مقاله mdn رو بخونید چون خیلی کامل تر توضیح داده و به شدت مثال های زیادی داره. امیدوارم مقالم براتون مفید بوده باشه

اگه متنی که نوشتم ایرادی داشت یا فکر میکنید با عوض کردن قسمتیش قابل فهم تر میشه ممنون میشم تو کامنت ها به من اعلام کنید.

من برای نوشتن این متن ها اول این سایت میرم و منطق یک دیزاین پترن رو میخونم و بعد چیز هایی که فهمیدم رو برای شما مینویسم مثلا تو پست قبلی‫ راجب Provider پترن توضیح دادم که میتونید رو لینک زیر کلیک کنید و بخونیدش.

https://vrgl.ir/OaIf9
prototypejavascriptجاوااسکریپتبرنامه نویسیjs
شاید از این پست‌ها خوشتان بیاید