انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 102
دورة جافا سكريبت

Class Inheritance

في هذا الدرس سوف نتعرف علي مبدا ال inheritance وهي طريقة تستخدم في وراثة عناصر class معين بواسطة class اخر واستخدامها دون إعادة كتابتها مره اخري 

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
3
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,986
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

Class Inheritance

  inheritance وهي طريقة تستخدم في وراثة عناصر class معين بواسطة class اخر واستخدامها دون إعادة كتابتها مره اخري 

  • نستطيع عمل وراثة inheritance من class الي اخر عن طريق كتابة كلمة extends بين ال parent class وهو الذي يحتوي علي العناصر التي سوف يرثها ال class الاخر وال child class وهو ال class الذي سيقوم بوراثة هذه العناصر 

Example

HTML 
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + 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 لتشير الي class الأساسي وهو في المثال السابق " car " 

  • عن طريق استدعاء الدالة ( )super بداخل دالة ( )constructor نقوم باستدعاء دالة ال constructor الخاصة بال parent class وبهذه الطريقة نستطيع الوصول الي العناصر الخاصة به 

Getters and Setters

تسمح لنا ال classes في استخدام ال setter وال getters  علي للدوال الخاصة بك وتعمل بطريقة اكثر فاعلية عندما تقوم بالتعديل علي القيم التي سوف تقوم الدالة بأرجاعها 

ونستطيع استخدام ال setter عن طريق كتابة كلمة set واستخدام ال getters عن طريق كتابة كلمة get 

Example

HTML 
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;
جرّب بنفسك

Hoisting

علي عكس الدوال العادية فأن دوال ال class لا يمكن استدعائها في اسطر تسبق انشائها أي انها لا تدعم ال Hosting 

Example

HTML 
/* You cannot use the class yet. */
/* myCar = new Car("Ford") */
/*This would raise an error. */

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

/* Now you can use the class: */
let myCar = new Car("Ford")
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…