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

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

1403/07/29 20:25 محراب حسن زاده
مفاهیم پیشرفته در کلاس‌ها و وراثت (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, می‌توانید کلاس‌های جدیدی بسازید که از کلاس‌های دیگر ارث‌بری می‌کنند و ویژگی‌ها و رفتارهای آن‌ها را گسترش دهید. درک و استفاده از این مفاهیم پیشرفته به شما این امکان را می‌دهد که برنامه‌های پیچیده‌تر و مقیاس‌پذیرتری بنویسید و اصول شیءگرایی را به طور مؤثر پیاده‌سازی کنید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش جامع مدیریت خطاها در PHP بر اساس استانداردهای گوگل
1405/05/01 20:23

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

مطالعه بیشتر
آموزش گام به گام ساخت سیستم لاگین و لاگ‌اوت در PHP به صورت ایمن
1405/05/14 22:13

آموزش گام به گام ساخت سیستم لاگین و لاگ‌اوت در PHP به صورت ایمن

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

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

مطالعه بیشتر
آموزش کامل حلقه foreach در PHP برای پیمایش آرایه‌ها (به زبان ساده)
1405/04/04 00:22

آموزش کامل حلقه foreach در PHP برای پیمایش آرایه‌ها (به زبان ساده)

مطالعه بیشتر
آموزش لیست‌ها در CSS: طراحی و استایل‌دهی ساده برای لیست‌های HTML
1402/06/10 17:47

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

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

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

مطالعه بیشتر
ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع
1403/08/11 20:59

ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع

مطالعه بیشتر
آشنایی با Inheritance در CSS: اصول وراثت و مدیریت استایل‌ها
1403/08/12 19:59

آشنایی با Inheritance در CSS: اصول وراثت و مدیریت استایل‌ها

مطالعه بیشتر
JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد
1402/06/28 23:35

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

مطالعه بیشتر
راهنمای جامع قوانین نام‌گذاری متغیرها در PHP بر اساس استاندارد گوگل
1405/03/24 00:57

راهنمای جامع قوانین نام‌گذاری متغیرها در PHP بر اساس استاندارد گوگل

مطالعه بیشتر
آموزش جامع کوکی (Cookie) در PHP + مدیریت اصولی و امنیت آن بر اساس استاندارد گوگل
1405/05/01 20:10

آموزش جامع کوکی (Cookie) در PHP + مدیریت اصولی و امنیت آن بر اساس استاندارد گوگل

مطالعه بیشتر
روش‌های کار با Conditional و Loop در Vue.js | آموزش v-if، v-show و v-for
1404/09/28 21:24

روش‌های کار با Conditional و Loop در Vue.js | آموزش v-if، v-show و v-for

مطالعه بیشتر

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