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

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

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

در جاوا اسکریپت، کلاس‌ها و وراثت (Inheritance) ابزارهای قدرتمندی برای برنامه‌نویسی شیءگرا هستند که به شما این امکان را می‌دهند تا ساختارهای پیچیده‌ای از اشیاء را با استفاده از اصول شیءگرا طراحی کنید. با استفاده از کلمات کلیدی extends و super، می‌توانید کلاس‌های جدیدی بسازید که از کلاس‌های دیگر ارث‌بری می‌کنند و ویژگی‌ها و متدهای آن‌ها را گسترش دهند. در این مقاله، به بررسی مفاهیم پیشرفته در کلاس‌ها و وراثت خواهیم پرداخت.

 

مقدمه‌ای بر کلاس‌ها و وراثت در جاوا اسکریپت

کلاس‌ها در جاوا اسکریپت از زمان ES6 به زبان اضافه شده‌اند و به شما این امکان را می‌دهند که شیءها و توابع را به صورت سازمان‌یافته‌تری مدیریت کنید. وراثت (Inheritance) یکی از اصول کلیدی برنامه‌نویسی شیءگرا است که به شما این امکان را می‌دهد که ویژگی‌ها و رفتارهای کلاس‌های موجود را به کلاس‌های جدید منتقل کنید و آن‌ها را گسترش دهید.

 

تعریف کلاس‌ها با استفاده از class

کلاس‌ها در جاوا اسکریپت با استفاده از کلمه کلیدی class تعریف می‌شوند. یک کلاس می‌تواند شامل سازنده (constructor)، متدها و ویژگی‌ها باشد.

 

ساختار کلی کلاس


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

  greet() {
    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.

 

در این مثال:

  • کلاس Person دارای یک سازنده و یک متد greet است.

  • سازنده برای تنظیم خصوصیات name و age استفاده می‌شود.

 

وراثت با استفاده از extends

با استفاده از کلمه کلیدی extends، می‌توانید یک کلاس جدید را از کلاس موجود به ارث ببرید و ویژگی‌ها و متدهای آن را گسترش دهید.

 

ساختار وراثت


class Animal {
  constructor(name) {
    this.name = name;
  }

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // فراخوانی سازنده کلاس پایه
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} barks.`);
  }
}

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

 

در این مثال:

  • کلاس Dog از کلاس Animal ارث می‌برد و از ویژگی‌ها و متدهای آن استفاده می‌کند.

  • سازنده کلاس Dog با استفاده از super(name)، سازنده کلاس پایه را فراخوانی می‌کند تا خصوصیت name را تنظیم کند.

  • متد bark به کلاس Dog اضافه شده است.

 

ستفاده از super

کلمه کلیدی super برای دسترسی به متدها و سازنده‌های کلاس پایه (پدر) از داخل کلاس فرزند (پسر) استفاده می‌شود.

 

فراخوانی سازنده کلاس پایه


class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

class Student extends Person {
  constructor(name, studentId) {
    super(name); // فراخوانی سازنده کلاس پایه
    this.studentId = studentId;
  }

  greet() {
    super.greet(); // فراخوانی متد پایه
    console.log(`My student ID is ${this.studentId}.`);
  }
}

const student = new Student('Ali', '12345');
student.greet();
// Output:
// Hello, my name is Ali.
// My student ID is 12345.

 

در این مثال:

  • سازنده کلاس Student از super(name) برای فراخوانی سازنده کلاس Person استفاده می‌کند.

  • متد greet در کلاس Student با استفاده از super.greet() متد پایه را فراخوانی می‌کند و سپس پیغام دیگری را چاپ می‌کند.

 

استفاده از super برای فراخوانی متدهای پایه


class Shape {
  constructor(name) {
    this.name = name;
  }

  area() {
    return 0;
  }
}

class Rectangle extends Shape {
  constructor(name, width, height) {
    super(name);
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }

  describe() {
    console.log(`The area of the ${this.name} is ${super.area()}.`);
    console.log(`The actual area of the ${this.name} is ${this.area()}.`);
  }
}

const rectangle = new Rectangle('rectangle', 5, 10);
rectangle.describe();
// Output:
// The area of the rectangle is 0.
// The actual area of the rectangle is 50.

 

در این مثال:

  • متد describe در کلاس Rectangle از super.area() برای دسترسی به متد area کلاس پایه استفاده می‌کند.

 

مدیریت وراثت چندگانه

جاوا اسکریپت به طور مستقیم از وراثت چندگانه (وراثت از چندین کلاس) پشتیبانی نمی‌کند. اما با استفاده از مفاهیم دیگر مانند میکسین‌ها (Mixins) می‌توانید ویژگی‌های مشابهی را پیاده‌سازی کنید.

 

استفاده از میکسین‌ها

میکسین‌ها به شما این امکان را می‌دهند که ویژگی‌ها و متدها را از چندین منبع به یک کلاس اضافه کنید.

مثال: استفاده از میکسین‌ها


const Flyer = {
  fly() {
    console.log(`${this.name} is flying.`);
  }
};

const Swimmer = {
  swim() {
    console.log(`${this.name} is swimming.`);
  }
};

class Superhero {
  constructor(name) {
    this.name = name;
  }
}

// افزودن میکسین‌ها به کلاس
Object.assign(Superhero.prototype, Flyer, Swimmer);

const hero = new Superhero('Superman');
hero.fly();  // Output: Superman is flying.
hero.swim(); // Output: Superman is swimming.

 

در این مثال:

  • دو میکسین Flyer و Swimmer تعریف شده‌اند.

  • با استفاده از Object.assign, متدهای این میکسین‌ها به پروتوتایپ کلاس Superhero اضافه شده‌اند.

 

نکات و تکنیک‌های پیشرفته

استفاده از متدهای استاتیک

متدهای استاتیک به متدهایی اطلاق می‌شود که به خود کلاس تعلق دارند و نه به نمونه‌های آن.


class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathUtils.add(2, 3)); // Output: 5
console.log(MathUtils.multiply(2, 3)); // Output: 6

 

استفاده از Getter و Setter

Getters و Setters به شما این امکان را می‌دهند که ویژگی‌های کلاس را به صورت خصوصی و قابل کنترل نگه دارید.


class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get radius() {
    return this._radius;
  }

  set radius(value) {
    if (value > 0) {
      this._radius = value;
    } else {
      console.log('Radius must be positive.');
    }
  }

  get area() {
    return Math.PI * this._radius * this._radius;
  }
}

const circle = new Circle(5);
console.log(circle.area); // Output: 78.53981633974483
circle.radius = 10;
console.log(circle.area); // Output: 314.1592653589793

 

نتیجه‌گیری

کلاس‌ها و وراثت در جاوا اسکریپت ابزارهای قدرتمندی برای طراحی برنامه‌های شیءگرا هستند. با استفاده از کلمه‌های کلیدی extends و super, می‌توانید کلاس‌های جدیدی بسازید که از کلاس‌های دیگر ارث‌بری می‌کنند و ویژگی‌ها و رفتارهای آن‌ها را گسترش دهید. درک و استفاده از این مفاهیم پیشرفته به شما این امکان را می‌دهد که برنامه‌های پیچیده‌تر و مقیاس‌پذیرتری بنویسید و اصول شیءگرایی را به طور مؤثر پیاده‌سازی کنید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

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

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

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

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

مطالعه بیشتر
راهنمای کامل لیست‌ها در HTML: آموزش انواع و اصول سئو
20م مرداد 1402

راهنمای کامل لیست‌ها در HTML: آموزش انواع و اصول سئو

مطالعه بیشتر
آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر
2م بهمن 1402

آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر

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

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

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

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

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

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

مطالعه بیشتر
مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها
29م مهر 1403

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

مطالعه بیشتر
آموزش ترانزیشن‌ها و انیمیشن‌های نرم با CSS: ایجاد افکت‌های پویا و واکنش‌گرا
10م شهریور 1402

آموزش ترانزیشن‌ها و انیمیشن‌های نرم با CSS: ایجاد افکت‌های پویا و واکنش‌گرا

مطالعه بیشتر
آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها
2م آبان 1403

آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها

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

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

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

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

مطالعه بیشتر

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