درک پروتوتایپ (prototype) در جاوااسکریپت به زبانی ساده

دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
هاست سی پنل
قیمت هاست cPanel | هاست سی پنل ارزان
قیمت هاست cPanel | هاست سی پنل ارزان
هاست ایمیل
سرور ایمیل | هاست ایمیل اختصاصی | میل سرور smartermail
خودتان را اینجا معرفی کنید
سرور ایمیل | هاست ایمیل اختصاصی | میل سرور smartermail
برای درک موضوع Prototype ابتدا شما باید مفهوم Object رو درک کنید و سپس به ادامه موضوع بپردازید، پس به شما پیشنهاد میکنم قبل از ادامه موضوع این مقاله رو مطالع نمائید : "آبجکت های جاوااسکریپت و جزئیات آنها!"
هرچند درک موضوع Prototype به آسانی درک موضوع variable در توابع هست .
هر Object جاوااسکریپت یک prototype دارد و خود prototypeها نیز Object هستند!
تمام Objectهای جاوااسکریپت ویژگیها و متدهای خود را از prototypeها به ارث میبرند!
برای درک این دوجملهی بالا لازم است ریزتر به مسائل دقت کنیم ، در مبحث " توابع و روش های فراخوانی آن ها در جاوااسکریپت " که یکی از جذابترین بخش های تابع هست اگر یادتون باشه یک ساختار رو تعریف میکردیم و در بخش های مختلف برنامه میتونستیم از اون تابع برای ایجاد و توسعه استفاده کنیم و مقداری رو فراخوانی میکردیم و با استفاده از تابع سازنده، مقدار نهایی برای ما بازگشت داده میشد. در اینجا هم هدف از prototype همین موضوع برای Objectها می باشد و شباهت زیادی به هم دارند.
تمام آبجکتهای جاوااسکریپت (Date, Array, RegExp, Function, ....) از Object.Property ارثبری میکنند.
راه استاندارد برای ساخت یک object prototype این است که از تابع آبجکت سازنده(object constructor function) استفاده کنیم.
function person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
شما با کمک تابع سازنده، میتونید با کلمه کلیدی new آبجکتهای جدید رو شبیه prototype بسازید.
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

تا به اینجا ما تقریبا موضوع رو تا حدود زیادی میدونستیم (با توجه به مقاله های قبل) و مفهوم اصلی prototype رو میشه گفت تا آخر مقاله کامل درک میکنید :)
برای افزودن یک ویژگی به آبجکت ما به راحتی میتونیم به صورت زیر عمل کنیم :
myFather.nationality = "English";
ولی نکته ای که مهم است اینه که ما این ویژگی رو به آبجکت myFather اضافه کردیم و آبجکت myMother هیچ تغییری نکرد.برای افزودن یک متد به آبجکت هم به صورت زیر میتونیم عمل کنیم :
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
و بازم تاکید میکنم که این متد رو ما فقط به آبجکت myFather اضافه کردیم و آبجکت myMother هیچ تغییری نکرد.حالا ما یک ویژگی رو به prototype اضافه میکنیم :

person.nationality = "English"; // Undefined
برای اضافه کردن ویژگی جدید به protottype به صورت زیر عمل میکنیم :
function person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English"
}

و برای افزودن متد به prototype میتونیم به صورت زیر عمل کنیم :
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ها به صورت خیلی ساده تر ویژگی و متدی را به صورت خارجی اضافه کنیم، به این صورت :
person.prototype.nationality = "English";
person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};

بابررسی مثال زیر میتونیم مفاهیم رو بهتر متوجه شویم :
function PrintStuff(myDocuments) {
this.documents = myDocuments;
}
// متد جدیدی رو اضافه کردیم
PrintStuff.prototype.print = function () {
console.log(this.documents);
}
// آبجکت جدیدی رو ساختیم که مقداری رو به تابع سازنده ارسال میکنه
var newObj = new PrintStuff("MajidOline.com");
//همانطور که میبینید آبجکت جدید همه ویژگیها و متدها رو به ارث برده
newObj.print (); //MajidOnline.com
و مثال آخر مثالی پیچیده تر و کاربردیتر :
function Plant() {
this.country = "Iran";
this.isOrganic = true;
}
// (plant)افزودن متد جدید به تابع فوق
Plant.prototype.showNameAndColor = function() {
console.log("I am a " + this.name + " and my color is " + this.color);
}
// افزودن متد جدید به تابع فوق(plant)
Plant.prototype.amIOrganic = function() {
if(this.isOrganic) // true
console.log("I am organic!");
}
function Fruit(fruitName, fruitColor) {
this.name = fruitName;
this.color = fruitColor;
}
// ست کردن پروتوتایپ "فروت" به تابع سازنده "پلانت" وبه ارثبردن تمام ویژگی ها و متدهای اون
// Set the Fruit's prototype to Plant's constructor
Fruit.prototype = new Plant();
// ساخت آبجکت جدید از تابع سازند "Fruit"
var aBanana = new Fruit("Banana", "Yellow");
console.log(aBanana.name); // Banana
// در این قسمت از متدی استفاده میشود که از پروتوتایپ قبلی به ارث برده
console.log(aBanana.showNameAndColor()); // I am a Banana and my color is yellow.
امیدوارم مفید بوده باشه.
شاد باشید

نظرات و سوالات کاربران
correct:
Object.Prototype
کلا متوجه نشدم
خب این چه کاریه یعنی چی this.firstName = first;
تو es6 که برای ساختن کلاس از کلمه کلیدی class استفاده میکنیم. دو تا کلاس مختلف تعریف می کنیم. در کلاس دوم ما یک ویژگی داریم که آرایهای از شیهای کلاس اول است. حالا اگه بخوایم روی این ویژگی عملیاتی انجام بدیم باید متد کلاس اول را تو کلاس دوم فراخوانی کنیم.
به طور خلاصه چجوری میشه تو یه کلاس از متد یه کلاس دیگه استفاده کرد بدون ارث بری؟
خیلی خوب بود
عالی بود