prototype در جاوا اسکریپت چیست ؟

سلام دوستان عزیز امروز میخواهیم prototype رو در جاوا اسکریپت بررسی کنیم با من همراه باشید تا ببنیم چه اتفاقی در جاوا اسکریپت رخ میده.

اما اول از هرچیزی میخواهم یک نکته رو بهتون بگم این که هر چیزی در جاوا اسکریپت یک object هستش و همه ی object ها از شی ای به نام prototype به ارث میبرند.

مشکی که اکثر برنامه نویس هایی که قبلا با زبان های java و c# کار کردند این هست که فکر میکنن جاوا اسکریپ همون object معمولی دارد و  فاقد از این که این زبان یکم شی گرایی اش متفاوت هستش همان طور که میدانید زبان هایی مثل java و c# زبان های class-base هستند اما جاوا اسکریپت prototype-base هستش

خب تا این جا متوجه شدیم هر شی ای در جاوا اسکریپت از protoype به ارث میبره و این شی برای خودش یک سری متد و صفت داره که در ادامه با آن ها اشنا میشیم.

اما قبل از این که بدونیم prototype ها چی هستند بهتره یه نیم نگاهی به شی های جاوا اسکریپت بندازیم :

 

تعریف object تحت اللفظی

😀 راستش نمیدونم چیجوری ترجمه کنم به فارسی ولی میتونیم بهش بگیم تعریف object همینجوری یهویی 😀

در این نمونه ما یک متغییر درست کردیم و صفت ها و مقادیر آن ها را در همون شی تعریف میکنیم

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

زمانی که ما یک شی ایجاد میکنیم با استفاده از کلمه ی کلیدی new Object() در اصل داریم از prototype به ارث میبریم و Object.prototype را صدا میزنیم

اما زمانی اگر new Date() را فراخوانی کنیم مانند بقیه شی های بومی از prototype به ارث میبریم و  Date.prototype را صدا میزنیم.

 

تعریف object با کلمه ی new

در این نمونه ابتدا با new کردن شی ()object ما یک شی درست میکنیم و بعد به آن شی property ( صفت های شی ) رو اضافه میکنیم

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

 

تعریف با استفاده از Object Constructor

در این مثال ما یک نمونه با صفت و متد های مورد نیاز تعریف میکنیم و این نوع شی نسبت به بقیه محدودیت های خاص خودش را دارد ( یکم قوانین سخت گیرانه ای داره 🙂 )

این نوع تعریف شی بیشتر برای زمانی استفاده میشه که میخواهیم data-type تعریف کنیم و بیشتر برای ما خیلی جذابه این نوع تعریف object

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

نکته : به کلمه ی function در مثال بالا دقت کنید در اینجا function به معنی سازنده معنی میدهد.

نکته : برای تعریف صفت یا همون property ها باید داخل function تعریف کنیم.

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

 

Object.prototype در بالاترین سطح prototype قرار دارد ، به شکل زیر توجه داشته باشید :

 

چگونه prototype درست کنیم ؟

ساده ترین حالت ممکن استفاده از همین object constructor function  هستش که حالت استاندارد ساخت prototype هست به مثال زیر توجه کنید :

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

 

با تعریف prototype با نام person همان طور که در بالا میبینید، ما یک نمونه اولیه ساختیم و باید از این نمونه اولیه نمونه سازی کنیم برای این کار کافیه از کلمه ی کلیدی new قبل از استفاده از person استفاده کنید. به مثال زیر توجه کنید :

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

در مثال بالا ما دو تا نمونه ساختیم یکی myFather و دیگری myMother می باشد.

 

چگونه به prototype خود متد ( function ) و صفت ( property ) اضافه کنیم ؟

خب اگه یکم با هم بررسی کنیم مثال زیر را نگاه کنید ما میتوانیم یک صفت به شی myFather خود اضافه کنم

myFather.nationality = "English";
Try it Yourself »

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

myFather.name = function () {
    return this.firstName + " " + this.lastName;
};

نکته : در اینجا ما متد name را فقط به شی myFather افزوده کردیم نه به شی myMother پس به این نکته توجه کنید که فقط به اون شی ای که اضافه کردید اضافه میشه و به بقیه شی های از جنس person  اضافه نمیشود.

 

و اما اضافه کردن متد و صفت به شی prototype :

راستش رو بخواهید پروتایپ رو به شکل بالا نمیتوانید به آن صفت و متد تعریف کنید مثلا به prototype که با نام person ایجاد کردیم نمیتوانید به شکل بالا متد و صفت اضافه کنید اما شما فقط میتوانید در داخل فانکشن سازنده، متد و صفت خود را تعریف کنید.

 

این مثال نحوه اضافه کرد غلط صفت را نمایش میدهد :

Person.nationality = "English";

این مثال نحوه اضافه کرد غلط متد را نمایش میدهد :

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.name = function() {return this.firstName + " " + this.lastName;};
}

اما یک نکته ای فقط این روش بالا برای اضافه کردن صفت و متد به prototype که ساختید نیست و راه بهتری هم هست ، بالاتر متوجه شدید که prototype برای خودش یک سری صفت داره که میتونیم ازشون استفاده کنیم برای این کار چی کار باید بکنیم ؟

ما در بالا یک prototype ساختیم به اسم person و این دارای صفتی داره به نام prototype با این صفت ما میتونیم صفت ها و متد هامون به prototype که اسمش رو گذاشتیم person اضافه کنیم برای این کار به کد زیر دقت کنید :

Person.prototype.hi = function(){
alert("hi !") ;
};

ما یک متد خواستیم به prototype مون اضافه کنیم و اون اسمش هست hi که یک alert را نمایش میده

برای اضافه کردن این متد هم از صفت prototype استفاده کردم که بتونم متد ام را اضافه کنم به prototype که ما اسمش رو گذاشتیم person