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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

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

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

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

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

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

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش

مطالعه بیشتر
کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب
11م آبان 1403

کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب

مطالعه بیشتر
آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا
16م آبان 1403

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

مطالعه بیشتر
آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها
1م آبان 1403

آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

مطالعه بیشتر
چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان
2م مهر 1402

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

مطالعه بیشتر
آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed
5م شهریور 1402

آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed

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

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

مطالعه بیشتر
الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها
1م آبان 1403

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

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

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

مطالعه بیشتر
توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6
2م شهریور 1403

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

مطالعه بیشتر

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