الگوی طراحی prototype در جاوا اسکریپت

الگوی طراحی prototype در جاوا اسکریپت نوشته شده در   javascript ۱۵ بهمن , ۱۳۹۷ توسط  عباس حسینی

آیا تا به حال به این فکر کرده اید که اگر شی ای ساخته میشود برای صرفه جویی در حافظه میتوان از بخشی از حافظه که آن شی استفاده کرده استفاده مجدد کرد؟ اگر به این موضوع اندیشیده اید باید بدانید که این موضوع در الگوی طراحی prototype مطرح میشود که در ادامه آن را خواهید آموخت

تعریف الگوی طراحی prototype در جاوا اسکریپت

از آنجاییکه ساخت یک شی میتونه خیلی هزینه بر باشه و هر بار که شی جدیدی میسازیم فضایی جدید در حافظه برای آن اشغال میکنیم بنابراین میتوانیم آن بخش از حافظه را کپی کنیم و با این کار در مصرف حافظه صرفه جویی کنیم

الگوی طراحی prototype به ما کمک میکند تا این کار را انجام دهیم
در جاوا اسکریپت این کار از طریق Object.create امکان پذیر است اما قبل از آن میخواهم تفاوت ساخت شی کلمه کلیدی new و Object.create را برای شما توضیح دهم
اگر به کد زیر که پیاده سازی پروسه new میباشد دقت کنید، میبینید که هنگامی که از کلمه کلیدی new استفاده میکنیم در واقع ۴ عمل صورت میگیرد

  1. ساخت شی
  2. اتصال به prototype
  3. تعیین مقادیر برای سازنده
  4. برگرداندن

var NEW = function(constructor, args) { 
   var o = {};//1- Create object 
   o.__proto__ = constructor.prototype; //2- Link (set object's __proto__ to constructor prototype) 
   constructor.apply(o,args); //3- Pass (invoke constructor with values)
   return o ; //4- Return  
} 

اما وقتی از Object.create استفاده میکنیم در واقع سه کار انجام میشود

  1. ساخت شی
  2. اتصال به prototype
  3. برگرداندن

var ObjectCreate = function(constructor) {  
  var o = {};  //1- Create object 
  o.__proto__ = constructor.prototype; //2- Link (set object's __proto__ to constructor prototype)  
  return o //3- return
} 

پس هنگام استفاده از Object.create پردازش کمتری انجام شده و سرعت بیشتری نسبت به کلمه کلیدی new دارد

اگر به شکل زیر توجه کنید متوجه میشوید که شی prototype از طریق متد clone ساخته میشود

الگوی طراحی prototype

همچنین برای فهم prototypical inheritance پیشنهاد میکنیم لینک زیر را مطالعه کنید

لینک مطالعه

نحوه پیاده سازی الگوی طراحی prototype در جاو اسکریپت

برای پیاده سازی این الگو کافیست یک متد به نام clone وجود داشته باشد که همه مقادیر شی مبدا را در شی مقصد کپی کند پس فرض میکنیم یک کلاس به نام Book داریم که خود دارای یک متد به نام clone میباشد که از طریق آن میتوان از شی ایجاد شده کپی برداری کرد


class Book {
    constructor(name) {
        this.name = name;
    }

    clone() {
        return new Book(this.name);
    }
}

در انتها نتیجه پیاده سازی این الگو را میتوانید مشاهده کنید

See the Pen
Javascript Prototype Design Pattern
by abbas hosseini (@abizebel)
on CodePen.

موارد استفاده از الگوی prototype در جاوا اسکریپت

توجه کنید که زمانی از این الگو استفاده میکنیم که کد شما وابسته به کلاسی که میخواهید از شی آن کپی کنید نباشد و این کار از تکرار تولید یک شی جلوگیری میکند

لیست الگوهای طراحی GOF در جاو اسکریپت

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns