آموزش رایگان جاوا اسکریپت (JavaScript)

آموزش کامل توابع سازنده (Constructors) و پروتوتایپ‌ها (Prototypes) در جاوا اسکریپت: راهنمای جامع

28م مهر 1403 محراب حسن زاده
آموزش کامل توابع سازنده (Constructors) و پروتوتایپ‌ها (Prototypes) در جاوا اسکریپت: راهنمای جامع

در جاوا اسکریپت، توابع سازنده (Constructors) و پروتوتایپ‌ها (Prototypes) ابزارهای کلیدی برای ایجاد و مدیریت اشیاء هستند. این مفاهیم پایه‌ای برای برنامه‌نویسی شیءگرا در جاوا اسکریپت به شمار می‌روند و به شما این امکان را می‌دهند که ساختارهای پیچیده و قابل استفاده مجدد را بسازید. در این مقاله، به بررسی این دو مفهوم و نحوه استفاده از آن‌ها خواهیم پرداخت.

 

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

توابع سازنده به شما این امکان را می‌دهند که شیءهای جدید با ویژگی‌ها و متدهای خاص خود ایجاد کنید. این توابع به صورت معمول با حرف بزرگ آغاز می‌شوند و برای ایجاد و مقداردهی اولیه به اشیاء استفاده می‌شوند.

 

تعریف تابع سازنده

یک تابع سازنده با استفاده از کلمه‌کلیدی function تعریف می‌شود. به طور معمول، این تابع خصوصیات را با استفاده از کلمه‌کلیدی this تنظیم می‌کند.


function Person(name, age) {
  this.name = name;
  this.age = age;
}

const ali = new Person('Ali', 30);
console.log(ali.name); // Output: Ali
console.log(ali.age);  // Output: 30

 

در این مثال:

  • تابع سازنده Person دو پارامتر name و age را دریافت کرده و آن‌ها را به خصوصیات this.name و this.age نسبت می‌دهد.

  • کلمه‌کلیدی new، یک شیء جدید از نوع Person ساخته می‌شود.

 

استفاده از توابع سازنده برای ایجاد نمونه‌های مختلف

با استفاده از توابع سازنده می‌توانید نمونه‌های مختلفی از یک کلاس بسازید:


function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('Toyota', 'Corolla', 2020);
const car2 = new Car('Honda', 'Civic', 2021);

console.log(car1); // Output: Car { make: 'Toyota', model: 'Corolla', year: 2020 }
console.log(car2); // Output: Car { make: 'Honda', model: 'Civic', year: 2021 }

 

در اینجا، از تابع سازنده Car برای ایجاد دو نمونه مختلف از اتومبیل استفاده شده است.

 

پروتوتایپ‌ها (Prototypes) در جاوا اسکریپت

پروتوتایپ‌ها به شما این امکان را می‌دهند که متدها و خصوصیات مشترک را بین نمونه‌های مختلف شیء به اشتراک بگذارید. هر شیء در جاوا اسکریپت دارای یک ویژگی پنهان به نام [[Prototype]] است که به پروتوتایپ خود اشاره می‌کند.

 

اضافه کردن متدها به پروتوتایپ

می‌توانید متدها را به پروتوتایپ یک تابع سازنده اضافه کنید تا تمام نمونه‌های ساخته شده از آن تابع سازنده به این متدها دسترسی داشته باشند.


function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const ali = new Person('Ali', 30);
ali.greet(); // Output: Hello, my name is Ali and I am 30 years old.

 

در این مثال:

  • متد greet به پروتوتایپ Person اضافه شده است. این متد در تمام نمونه‌های Person در دسترس خواهد بود.

 

استفاده از پروتوتایپ‌ها برای اشتراک‌گذاری داده‌ها و متدها

پروتوتایپ‌ها به شما این امکان را می‌دهند که داده‌ها و متدها را بین نمونه‌های مختلف به اشتراک بگذارید، که می‌تواند منجر به بهبود کارایی و کاهش استفاده از حافظه شود.


function Vehicle(make, model) {
  this.make = make;
  this.model = model;
}

Vehicle.prototype.getDetails = function() {
  return `${this.make} ${this.model}`;
};

const bike = new Vehicle('Yamaha', 'MT-07');
console.log(bike.getDetails()); // Output: Yamaha MT-07

 

در اینجا، متد getDetails به پروتوتایپ Vehicle اضافه شده و برای نمونه‌های مختلف Vehicle قابل استفاده است.

 

ارث‌بری با استفاده از پروتوتایپ‌ها

پروتوتایپ‌ها به شما این امکان را می‌دهند که ویژگی‌ها و متدها را از یک تابع سازنده به تابع سازنده دیگر به ارث ببرید.


function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
  Animal.call(this, name); // فراخوانی سازنده Animal
}

// تنظیم پروتوتایپ Dog برای ارث‌بری از Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(`${this.name} barks.`);
};

const myDog = new Dog('Rex');
myDog.speak(); // Output: Rex makes a noise.
myDog.bark();  // Output: Rex barks.

 

در این مثال:

  • تابع سازنده Dog از Animal ارث می‌برد.

  • با استفاده از Object.create(Animal.prototype), پروتوتایپ Dog به پروتوتایپ Animal متصل می‌شود.

  • متد bark به پروتوتایپ Dog اضافه شده است.

 

تفاوت بین توابع سازنده و پروتوتایپ‌ها

  • توابع سازنده: برای ایجاد و مقداردهی اولیه به اشیاء استفاده می‌شود. توابع سازنده به ازای هر نمونه جدید، خصوصیات جدید را تنظیم می‌کنند.

  • پروتوتایپ‌ها: برای اشتراک‌گذاری متدها و خصوصیات بین نمونه‌های مختلف استفاده می‌شود. متدها و خصوصیات پروتوتایپ‌ها تنها یک بار در حافظه ذخیره می‌شوند و در تمام نمونه‌ها مشترک هستند.

 

نتیجه‌گیری

توابع سازنده و پروتوتایپ‌ها ابزارهای قدرتمندی در جاوا اسکریپت برای ایجاد و مدیریت اشیاء هستند. توابع سازنده به شما این امکان را می‌دهند که اشیاء جدید را ایجاد کنید، در حالی که پروتوتایپ‌ها امکان اشتراک‌گذاری ویژگی‌ها و متدها بین نمونه‌ها را فراهم می‌کنند. با استفاده صحیح از این ابزارها، می‌توانید کدهای بهینه‌تر و قابل نگهداری‌تری بنویسید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش Emit در Vue.js | انتقال رویداد از کامپوننت فرزند به والد
28م آذر 1404

آموزش Emit در Vue.js | انتقال رویداد از کامپوننت فرزند به والد

مطالعه بیشتر
آموزش استفاده از box-shadow و text-shadow در CSS: ایجاد سایه‌های زیبا و جذاب
11م آبان 1403

آموزش استفاده از box-shadow و text-shadow در CSS: ایجاد سایه‌های زیبا و جذاب

مطالعه بیشتر
سیر تا پیاز عملگرهای ریاضی در PHP + مثال‌های کاربردی
24م خرداد 1405

سیر تا پیاز عملگرهای ریاضی در PHP + مثال‌های کاربردی

مطالعه بیشتر
آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها
5م شهریور 1402

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

مطالعه بیشتر
تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثال‌ها
30م مهر 1403

تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثال‌ها

مطالعه بیشتر
استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف
12م آبان 1403

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

مطالعه بیشتر
آموزش کامل تفاوت echo و print در PHP به زبان ساده
21م خرداد 1405

آموزش کامل تفاوت echo و print در PHP به زبان ساده

مطالعه بیشتر
آموزش ایجاد و حذف المان‌های DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی
2م آبان 1403

آموزش ایجاد و حذف المان‌های DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی

مطالعه بیشتر
مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثال‌ها
30م مهر 1403

مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثال‌ها

مطالعه بیشتر
درک و استفاده از Watchers در Vue.js | آموزش Watch با مثال کاربردی
28م آذر 1404

درک و استفاده از Watchers در Vue.js | آموزش Watch با مثال کاربردی

مطالعه بیشتر
الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها
1م آبان 1403

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

مطالعه بیشتر
JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد
28م شهریور 1402

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد