وراثة الخصائص والوظائف

جزء من قسم Object Oriented Programming في رحلة JavaScript على Coddy — الدرس 28 من 56.

عندما تقوم فئة (class) بتوسيع فئة أخرى، فإنها ترث جميع الخصائص (properties) والأساليب (methods) من الفئة الأب (parent class). وهذا يعني أن الفئات التابعة (child classes) تمتلك تلقائياً حق الوصول إلى كل ما تم تعريفه في الفئة الأب.

لنقم بإنشاء فئة أب (parent class) بخصائص وطرق (methods):

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  eat() {
    return `${this.name} is eating`;
  }
  
  sleep() {
    return `${this.name} is sleeping`;
  }
}

الآن، لنقم بإنشاء فئة تابعة (child class) ترث من Animal:

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
}

أنشئ مثيلاً من فئة Dog:

const rex = new Dog("Rex", 3, "German Shepherd");

الآن، على الرغم من أننا لم نقم بتعريف eat() و sleep() في فئة Dog، لا يزال بإمكاننا استخدام هذه الأساليب (methods):

console.log(rex.eat());  // المخرجات: Rex is eating
console.log(rex.sleep()); // المخرجات: Rex is sleeping

ويمكننا الوصول إلى جميع الخصائص الموروثة:

console.log(rex.name);  // المخرجات: Rex
console.log(rex.age);   // المخرجات: 3
console.log(rex.breed); // المخرجات: German Shepherd

التحدي

قم بإنشاء فئة Cake ترث من Dessert وقم بتصديرها. يجب أن تحتوي الـ Cake على:

جميع الخصائص والأساليب الموروثة من Dessert
خاصية جديدة flavor
أسلوب جديد addCandles() يعيد سلسلة نصية “Added candles to ${this.name}!”

ورقة مرجعية

ترث الفئات الفرعية جميع الخصائص والأساليب من فئتها الأصلية باستخدام الكلمة المفتاحية extends:

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  eat() {
    return `${this.name} is eating`;
  }
  
  sleep() {
    return `${this.name} is sleeping`;
  }
}

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
}

const rex = new Dog("Rex", 3, "German Shepherd");
console.log(rex.eat());  // Rex is eating
console.log(rex.name);   // Rex
console.log(rex.breed);  // German Shepherd

يمكن للفئة الفرعية الوصول إلى جميع الخصائص والأساليب الموروثة دون إعادة تعريفها.

جرّب بنفسك

import { Dessert } from './desserts.js';
import { Cake } from './desserts.js';

// كود الاختبار - لا تقم بالتعديل
const myCake = new Cake("Birthday Cake", 300, "Chocolate");
console.log(myCake.describe());   // يجب أن تكون النتيجة "Birthday Cake has 300 calories"
console.log(myCake.flavor);       // يجب أن تكون النتيجة "Chocolate"
console.log(myCake.addCandles()); // يجب أن تكون النتيجة "Added candles to Birthday Cake!"