استخدام super

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

عندما تقوم بتجاوز دالة (method)، لا يزال بإمكانك الوصول إلى النسخة الأصلية للأب باستخدام super.methodName(). يتيح لك هذا توسيع أو تعديل سلوك الأب بدلاً من استبداله بالكامل.

أنشئ فئة أساسية (parent class) تحتوي على دالة (method):

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

أنشئ فئة تابعة (child class) ترث من الفئة الأب (parent class):

class Dog extends Animal {
  makeSound() {
    // استدعِ طريقة الفئة الأب أولاً
    const parentSound = super.makeSound();
    // ثم قم بالتوسيع بوظائف إضافية
    return `${parentSound}, but also Woof!`;
  }
}

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

const myDog = new Dog();
console.log(myDog.makeSound());
// الناتج: "Generic animal sound, but also Woof!"

تسمح لك الكلمة الأساسية super باستدعاء دوال الفئة الأب مع الاستمرار في إضافة وظائفك الخاصة في الفئة الابنة.

التحدي

لقد تم إعطاؤك فئة Shape تحتوي على طريقة calculateArea() وفئة Rectangle ترث منها. مهمتك هي تجاوز (override) طريقة calculateArea() في Rectangle باستخدام super.

مهمتك هي إكمال طريقة calculateArea() في فئة Rectangle من أجل:

استدعاء طريقة calculateArea() الخاصة بالفئة الأب باستخدام super وتخزين النتيجة
حساب المساحة الفعلية للمستطيل: width × height
إرجاع سلسلة نصية مدمجة: رسالة الأب + مساحة المستطيل. مثال: Calculating area... Rectangle area: 50

ورقة مرجعية

استخدم super.methodName() للوصول إلى الطريقة الأصلية للفئة الأب عند التجاوز (overriding):

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

class Dog extends Animal {
  makeSound() {
    const parentSound = super.makeSound();
    return `${parentSound}, but also Woof!`;
  }
}

const myDog = new Dog();
console.log(myDog.makeSound());
// المخرجات: "Generic animal sound, but also Woof!"

يتيح لك هذا توسيع وظائف الفئة الأب بدلاً من استبدالها بالكامل.

جرّب بنفسك

import { Shape } from './shapes.js';
import { Rectangle } from './shapes.js';

// كود الاختبار - لا تقم بالتعديل
const rectangle = new Rectangle(5, 10);
console.log(rectangle.calculateArea()); // المتوقع: "Calculating area... Rectangle area: 50"