آموزش رایگان جاوا اسکریپت (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 اضافه شده است.

 

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

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

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

 

نتیجه‌گیری

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش دسترسی به المان‌های HTML با استفاده از جاوا اسکریپت: راهنمای کامل با مثال‌ها
2م آبان 1403

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

مطالعه بیشتر
توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6
2م شهریور 1403

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

مطالعه بیشتر
مدیریت فرم‌ها و ورودی‌ها در Vue.js | آموزش Form Handling با مثال کاربردی
22م آذر 1404

مدیریت فرم‌ها و ورودی‌ها در Vue.js | آموزش Form Handling با مثال کاربردی

مطالعه بیشتر
راهنمای کامل تگ‌های <img> و <a> در HTML: تصاویر و لینک‌ها
21م مرداد 1402

راهنمای کامل تگ‌های <img> و <a> در HTML: تصاویر و لینک‌ها

مطالعه بیشتر
آموزش HTML: اولین گام برای طراحی سایت و سئو حرفه‌ای
18م مرداد 1402

آموزش HTML: اولین گام برای طراحی سایت و سئو حرفه‌ای

مطالعه بیشتر
تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها
9م آبان 1403

تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها

مطالعه بیشتر
جمع‌بندی، مرور مطالب و پروژه نهایی: ایجاد یک اپلیکیشن وب کامل با جاوا اسکریپت - راهنمای گام به گام
5م آبان 1403

جمع‌بندی، مرور مطالب و پروژه نهایی: ایجاد یک اپلیکیشن وب کامل با جاوا اسکریپت - راهنمای گام به گام

مطالعه بیشتر
کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر
16م آبان 1403

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

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

آموزش ارث‌بری (Inheritance) در جاوا اسکریپت: نحوه استفاده از پروتوتایپ‌ها و کلاس‌ها

مطالعه بیشتر
اصول پایه React.js: آشنایی با کامپوننت‌ها، وضعیت و رندرینگ
28م شهریور 1402

اصول پایه React.js: آشنایی با کامپوننت‌ها، وضعیت و رندرینگ

مطالعه بیشتر
آموزش اضافه کردن ویدئو و صدا به وب‌سایت: نحوه استفاده از تگ‌های video و audio در HTML
23م مرداد 1402

آموزش اضافه کردن ویدئو و صدا به وب‌سایت: نحوه استفاده از تگ‌های video و audio در HTML

مطالعه بیشتر
مدیریت رویدادها در جاوا اسکریپت: اضافه و حذف Event Listeners - آموزش جامع با مثال‌ها
2م آبان 1403

مدیریت رویدادها در جاوا اسکریپت: اضافه و حذف Event Listeners - آموزش جامع با مثال‌ها

مطالعه بیشتر

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