تنسيق الكلاس في جافا سكريبت

توريث الفئات

لإنشاء توريث الفئات، استخدم: extends الكلمات المفتاحية.

الفئات التي أنشئت باستخدام التوريث تورث جميع طرق الفئة الأخرى:

مثال

إنشاء فئة "Model" تورث طرق فئة "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'لدي سيارة ' + this.carname;
  }
}
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

جرب بنفسك

super() في طريقة constructor، نقوم بالاستدعاء إلى الفئة الأب.

من خلال استدعاء super() في هذا النوع، نحن نستدعي طريقة constructor من الفئة الأب، نحصل على حق الوصول إلى خصائص وطرق الفئة الأب.

الوراثة مفيدة جدًا لاستعادة الاستخدام البرمجي: استعادة الخصائص والمتغيرات من الفئة الموجودة مسبقًا عند إنشاء فئة جديدة.

Getter وSetter

تسمح لك الفئة أيضًا باستخدام getter وsetter.

من الذكاء استخدام getter وsetter لخصائصك، خاصة إذا كنت ترغب في القيام ببعض الأشياء الخاصة قبل العودة أو تعيينها.

لإضافة getter وsetter في الفئة، استخدم get و set الكلمات المفتاحية.

مثال

إنشاء getter وsetter للخصائص "carname":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

جرب بنفسك

ملاحظة:حتى لو كان getter طريقة، لا تستخدم دعائيات عند الحاجة إلى الحصول على قيمة الخصائص.

أسماء طرق getter/setter لا يجب أن تكون مثل أسماء الخصائص، في هذا المثال carname.

يستخدم العديد من المبرمجين رمز العلامة المائلة _ أمام اسم الخصائص لفصل getter/setter عن الخصائص الفعلية:

مثال

يمكنك استخدام رمز العلامة المائلة لفصل getter/setter عن الخصائص الفعلية:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

جرب بنفسك

للاستخدام setter، استخدم نفس النحوة التي تستخدمها لتعيين قيمة الخصائص بدون دواليب:

مثال

استخدام setter لتغيير اسم السيارة إلى "Volvo":

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

جرب بنفسك

الرفع

على عكس الإعلانات مثل الدوال والأدوات الأخرى في JavaScript، لا يتم رفع إعلانات الفئات.

这意味着 يجب عليك أولاً إعلان الفئة ثم استخدامها:

مثال

// لا يمكنك استخدام هذه الفئة بعد.
// myCar = new Car("Ford")
// هذا سيؤدي إلى ارتكاب خطأ.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
// الآن يمكنك استخدام هذا الفئة:
let myCar = new Car("Ford")

جرب بنفسك

ملاحظة:للإدعاءات الأخرى، مثل الدوال، لا يتمكن من ارتكاب خطأ عند محاولة استخدامها قبل الاعلان عنها، لأن سلوك الإعلان عن JavaScript افتراضي هو الرفع (تحريك الاعلان إلى أعلى).