Menu
Coddy logo textTech
flag Ar iconالعربيةdown icon

الوراثة

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

تعد الوراثة في JavaScript OOP وسيلة تتيح لفئة (class) واحدة الوصول إلى جميع الخصائص والأساليب من فئة أخرى.

لنلقِ نظرة على مثال. أنشئ فئة أب (parent class):

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

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

// Car ترث من Vehicle
class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

قم بإنشاء مثيل من الفئة الفرعية:

const myCar = new Car("Toyota", "Camry");

الوصول إلى الخصائص والأساليب:

console.log(myCar.brand);  // "Toyota" - موروثة من Vehicle
console.log(myCar.model);  // "Camry" - موروثة من Vehicle
// يمكن لـ Car الوصول إلى أساليب Vehicle
myCar.drive();  // "Driving!" - موروثة من Vehicle
// تمتلك Car أيضاً أساليبها الخاصة
myCar.honk();   // "Beep beep!" - خاصة بـ Car
challenge icon

التحدي

لقد تم إعطاؤك فئة Animal وفئة Dog التي ترث منها. مهمتك هي إنشاء كائن myDog بالاسم "Buddy" والعمر 3.

ورقة مرجعية

يسمح التوريث (Inheritance) لفئة واحدة بالوصول إلى الخصائص والأساليب من فئة أخرى باستخدام الكلمة المفتاحية extends.

الفئة الأب (Parent class):

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

الفئة الابن (Child class) التي ترث من الأب:

class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

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

const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand);  // "Toyota" - موروثة
myCar.drive();  // "Driving!" - موروثة
myCar.honk();   // "Beep beep!" - أسلوب خاص بها

جرّب بنفسك

import { Dog } from './animal.js';

// مهمة: قم بإنشاء كائن myDog بالاسم "Buddy" والعمر 3.


// كود الاختبار - لا تقم بالتعديل
console.log(myDog.name);  // يجب أن تكون النتيجة "Buddy"
console.log(myDog.age);  // يجب أن تكون النتيجة 3
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس Object Oriented Programming