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

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

1403/07/28 21:41 محراب حسن زاده
آموزش کامل توابع سازنده (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 اضافه شده است.

 

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

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

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

 

نتیجه‌گیری

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

راهنمای جامع نصب و پیکربندی محیط توسعه محلی (XAMPP، WAMP و Laragon)
1405/03/14 23:52

راهنمای جامع نصب و پیکربندی محیط توسعه محلی (XAMPP، WAMP و Laragon)

مطالعه بیشتر
استفاده از overflow در CSS برای مدیریت محتوای اضافی: راهنمای کامل و کاربردی
1403/08/11 21:37

استفاده از overflow در CSS برای مدیریت محتوای اضافی: راهنمای کامل و کاربردی

مطالعه بیشتر
واحدهای CSS مدرن: آموزش استفاده از vw، vh، vmin و vmax برای طراحی واکنش‌گرا
1403/08/11 20:43

واحدهای CSS مدرن: آموزش استفاده از vw، vh، vmin و vmax برای طراحی واکنش‌گرا

مطالعه بیشتر
راهنمای جامع پاک‌سازی داده‌های ورودی در PHP بر اساس استانداردهای گوگل
1405/04/27 22:21

راهنمای جامع پاک‌سازی داده‌های ورودی در PHP بر اساس استانداردهای گوگل

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

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

مطالعه بیشتر
آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML
1402/06/07 00:01

آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML

مطالعه بیشتر
تفاوت متد GET و POST در PHP؛ راهنمای جامع و استاندارد گوگل
1405/04/27 22:13

تفاوت متد GET و POST در PHP؛ راهنمای جامع و استاندارد گوگل

مطالعه بیشتر
مقدمه‌ای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی
1403/08/04 19:58

مقدمه‌ای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی

مطالعه بیشتر
آموزش ساختار استاندارد و بهینه پروژه PHP به سبک گوگل
1405/05/04 23:25

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

مطالعه بیشتر
آموزش کامل استفاده از float، clear، text و font در CSS برای طراحی وب: راهنمای جامع
1402/06/06 23:51

آموزش کامل استفاده از float، clear، text و font در CSS برای طراحی وب: راهنمای جامع

مطالعه بیشتر
مقایسه کامل و جامع MySQLi و PDO در PHP: کدام یک برای پروژه شما مناسب‌تر است؟
1405/05/04 23:45

مقایسه کامل و جامع MySQLi و PDO در PHP: کدام یک برای پروژه شما مناسب‌تر است؟

مطالعه بیشتر
آموزش کامل ساخت فرم در HTML: از المان‌ها تا نکات سئو
1402/05/21 23:48

آموزش کامل ساخت فرم در HTML: از المان‌ها تا نکات سئو

مطالعه بیشتر

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