تمديد الصفوف

تُستخدم الكلمة الرئيسية extends في تعبيرات أو تعريفات الفئة لإنشاء فئة تعمل كفئة فرعية من أخرى، مع استخدام الفئة الرئيسية (تُسمّى أحيانًا "الفئة الأساسية") كنموذج أوّلي للفئة الفرعية (تُسمّى أحيانًا "الفئة الفرعية" أو "الفئة المشتقة").

class ParentClass {}
class ChildClass extends ParentClass {}

Object.getPrototypeOf( ChildClass );
> class ParentClass {}

وتكتسب هذه الفئات الفرعية خصائص الفئة الرئيسية وطرقها. ويتيح لك ذلك توسيع نطاق الوظيفة الأساسية للفئة بهدف خدمة أغراض أكثر تحديدًا بدون تحميل الفئة الرئيسية عبئًا زائدًا لتناسب كل حالة استخدام ممكنة، أو إعادة تنفيذ الرمز البرمجي الذي يخدم غرضًا مشابهًا.

يمكن للفئات الفرعية تقديم آليات تنفيذها الخاصة بالطرق المكتسَبة من الفئة الرئيسية:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}
class ChildClass extends MyClass {
  classMethod() {
    console.log( `The value was '${ this.instanceProp },' and its type was '${ typeof this.instanceProp }.'`)
  }
}

const myParentClassInstance = new MyClass( "My string." );
const mySubclassInstance = new ChildClass( 100 );

myParentClassInstance.classMethod();
> "The value type was 'string.'"

mySubclassInstance.classMethod();
> "The value was '100,' and its type was 'number.'"

يمكنك أيضًا استدعاء الطرق المحددة في الفئة الرئيسية في سياق الفئة الفرعية باستخدام super:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
  subclassMethod() {
    super.classMethod();
    console.log( `The value type was '${ typeof this.instanceProp }.'`)
  }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance.subclassMethod();
> The value was '100.'
> The value type was 'number.'

كما هو موضّح في الأمثلة السابقة، عندما يتم حذف الطريقة constructor() في سياق فئة فرعية، تستدعي دالة الإنشاء الضمنية في JavaScript الدالة الإنشائية الرئيسية مع مجموعة الوسيطات نفسها. ومع ذلك، إذا كانت هناك دالة إنشائية في الفئة الفرعية، يجب أولاً استدعاء super() مع أي وسيطات ضرورية قبل الإشارة إلى this.

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
    constructor( myPassedValue ) {
        super( myPassedValue );
        this.modifiedProp = myPassedValue + 50;
    }\
    subclassMethod() {
        super.classMethod();
        console.log( `The value type was '${ typeof this.instanceProp }.'`)
    }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance;
> MyClass { instanceProp: 100, modifiedProp: 150 }

علامات الاستلام والقيم هي طرق خاصة تُستخدم حصريًا لاسترداد القيم وتحديدها، على التوالي. تتيح لك الطرق المحددة باستخدام الكلمات الرئيسية get وset إنشاء طرق يمكن التفاعل معها كما لو كانت مواقع ثابتة.

class MyClass {
    constructor( originalValue ) {
        this.totalValue = 0;
    }
    set doubleThisValue( newValue ) {
        this.totalValue = newValue * 2;
    }
    get currentValue() {
        console.log( `The current value is: ${ this.totalValue }` );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { totalValue: 0 }

myClassInstance.doubleThisValue = 20;

myClassInstance.currentValue;
> The current value is: 40

يتم تحديد الخاصيتين get وset على خاصية النموذج الأولي للفئة، وبالتالي تكون متاحة لجميع مثيلات الفئة.

التحقق من فهمك

اختَر العبارات الصحيحة عن الصفوف التي تم إنشاؤها باستخدام الكلمة الرئيسية extends.

وهي بمثابة العنصر الفرعي للفئة التي توسّعها.

تكتسِب خصائص وأساليب فئتها الرئيسية.

وهو بمثابة العنصر الرئيسي للفئة التي توسّعها.

It can't overwrite methods from a parent class.