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

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

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

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

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

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

28م مهر 1403

مطالعه بیشتر

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

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

4م آبان 1403

مطالعه بیشتر

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

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

7م شهریور 1402

مطالعه بیشتر

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

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

4م شهریور 1402

مطالعه بیشتر

کاربرد تگ‌های meta، title و keywords در سئو: راهنمای جامع بهینه‌سازی وب‌سایت

کاربرد تگ‌های meta، title و keywords در سئو: راهنمای جامع بهینه‌سازی وب‌سایت

25م مرداد 1402

مطالعه بیشتر

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

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

27م شهریور 1402

مطالعه بیشتر

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

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

18م شهریور 1402

مطالعه بیشتر

Async/Await: نوشتن کدهای خواناتر و ناهم‌زمان در جاوا اسکریپت - آموزش کامل با مثال‌ها

Async/Await: نوشتن کدهای خواناتر و ناهم‌زمان در جاوا اسکریپت - آموزش کامل با مثال‌ها

30م مهر 1403

مطالعه بیشتر

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

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

3م آبان 1403

مطالعه بیشتر

آموزش انیمیشن‌های پیشرفته با keyframes در CSS: طراحی حرکات پویا و چند مرحله‌ای

آموزش انیمیشن‌های پیشرفته با keyframes در CSS: طراحی حرکات پویا و چند مرحله‌ای

18م شهریور 1402

مطالعه بیشتر

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

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

1م آبان 1403

مطالعه بیشتر

مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی

مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی

11م آبان 1403

مطالعه بیشتر

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