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

مطالعه بیشتر
آموزش جامع اتصال به دیتابیس با PDO در PHP
1405/05/04 23:42

آموزش جامع اتصال به دیتابیس با PDO در PHP

مطالعه بیشتر
آموزش اصولی Insert اطلاعات در دیتابیس طبق استانداردهای گوگل
1405/05/13 20:58

آموزش اصولی Insert اطلاعات در دیتابیس طبق استانداردهای گوگل

مطالعه بیشتر
راهنمای کامل تگ‌های متنی HTML و اصول سئو برای محتوا
1402/05/18 00:40

راهنمای کامل تگ‌های متنی HTML و اصول سئو برای محتوا

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

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

مطالعه بیشتر
آموزش تکنیک‌های پیشرفته CSS Grid: طراحی ساختارهای پیچیده و واکنش‌گرا
1402/06/18 23:16

آموزش تکنیک‌های پیشرفته CSS Grid: طراحی ساختارهای پیچیده و واکنش‌گرا

مطالعه بیشتر
آموزش جامع اعتبارسنجی اطلاعات فرم در PHP طبق استانداردهای امنیتی گوگل
1405/04/27 22:17

آموزش جامع اعتبارسنجی اطلاعات فرم در PHP طبق استانداردهای امنیتی گوگل

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

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

مطالعه بیشتر
معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن
1402/06/28 00:59

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

مطالعه بیشتر
آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر
1403/08/11 20:50

آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر

مطالعه بیشتر
آموزش کامل دریافت اطلاعات فرم با متدهای GET و POST در PHP (با رعایت اصول امنیتی)
1405/04/27 22:06

آموزش کامل دریافت اطلاعات فرم با متدهای GET و POST در PHP (با رعایت اصول امنیتی)

مطالعه بیشتر
نصب Vue.js و ایجاد پروژه ساده: آموزش گام‌به‌گام راه‌اندازی Vue
1402/06/28 00:41

نصب Vue.js و ایجاد پروژه ساده: آموزش گام‌به‌گام راه‌اندازی Vue

مطالعه بیشتر

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