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

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

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

آموزش کامل توابع سازنده (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 اضافه شده است.

 

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

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

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

 

نتیجه‌گیری

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آشنایی با انواع انتخاب‌گرها و تغییر پس‌زمینه با CSS: راهنمای جامع

آشنایی با انواع انتخاب‌گرها و تغییر پس‌زمینه با CSS: راهنمای جامع

4م شهریور 1402

مطالعه بیشتر

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

29م مهر 1403

مطالعه بیشتر

مقدمه‌ای به template و دیتابایندینگ در Vue.js: نحوه مدیریت داده‌ها و رندرینگ پویا

مقدمه‌ای به template و دیتابایندینگ در Vue.js: نحوه مدیریت داده‌ها و رندرینگ پویا

28م شهریور 1402

مطالعه بیشتر

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

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

28م مهر 1403

مطالعه بیشتر

آموزش کامل کنترل جریان و استفاده از if و else در جاوا اسکریپت: راهنمای جامع برای مبتدیان

آموزش کامل کنترل جریان و استفاده از if و else در جاوا اسکریپت: راهنمای جامع برای مبتدیان

2م بهمن 1402

مطالعه بیشتر

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

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

6م شهریور 1402

مطالعه بیشتر

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

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

16م آبان 1403

مطالعه بیشتر

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

10م شهریور 1402

مطالعه بیشتر

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

18م شهریور 1402

مطالعه بیشتر

استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل

استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل

16م آبان 1403

مطالعه بیشتر

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

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

1م آبان 1403

مطالعه بیشتر

آموزش ساخت یک Todo List با استفاده از DOM و جاوا اسکریپت: راهنمای گام به گام

آموزش ساخت یک Todo List با استفاده از DOM و جاوا اسکریپت: راهنمای گام به گام

3م آبان 1403

مطالعه بیشتر

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