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

مستوى الكلاس مقابل مستوى الكائن

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

في أصناف JavaScript، هناك مستويان متميزان من الخصائص والأساليب:

  1. مستوى النسخة (Instance-level): الخصائص والأساليب التي تنتمي إلى كل كائن فردي يتم إنشاؤه من الصنف.
  2. مستوى الصنف (Class-level): الخصائص والأساليب التي تنتمي إلى الصنف نفسه، وليس إلى النسخ.

دعونا نفهم الفرق:

أولاً، لنلقِ نظرة على الأعضاء على مستوى الكائن (instance-level members). أنشئ فئة (class) عادية مع طريقة كائن (instance method):

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

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

const myCar = new Car("Toyota");

استدعِ أسلوب المثيل (instance method):

console.log(myCar.drive()); // Outputs: "The Toyota is driving"

لاحظ أن كل مثيل يحصل على نسخته الخاصة من طريقة drive ويمكنه الوصول إلى خصائصه الخاصة باستخدام this.

الآن، لنلقِ نظرة على أعضاء مستوى الفئة. نضيف طريقة ثابتة (static method) إلى فئتنا. استخدم الكلمة الأساسية static أمام اسم الطريقة لإنشاء طريقة تنتمي إلى الفئة نفسها، وليس إلى المثيلات (instances).

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

تُعد الأساليب الثابتة (Static methods) مفيدة للوظائف المساعدة التي لا تعتمد على بيانات مثيل معينة. يتم استدعاء الأسلوب الثابت على الفئة نفسها، وليس على المثيلات:

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // المخرجات: "Comparing Toyota with Honda"

ستؤدي محاولة استدعاء دالة ثابتة (static method) على مثيل (instance) إلى حدوث خطأ:

car1.compareModels(car1, car2); // خطأ: car1.compareModels ليست دالة
challenge icon

التحدي

لقد تم إعطاؤك فئة Calculator تحتوي فقط على مُنشئ (constructor). مهمتك هي إضافة طريقتين (methods):

1. طريقة مثيل (Instance Method) <strong>add(number)</strong>

  • تضيف الرقم المعطى إلى القيمة الحالية للآلة الحاسبة
  • تحدث this.value وتعيد القيمة الجديدة

    *يتم استدعاؤها على مثيلات الآلة الحاسبة: calc.add(3)

2. طريقة ثابتة (Static Method) <strong>multiply(num1, num2)</strong>

  • تأخذ رقمين وتعيد حاصل ضربهما
  • لا تستخدم this (الطرق الثابتة لا تملك بيانات مثيل)

    *يتم استدعاؤها على فئة Calculator نفسها: Calculator.multiply(4, 6)

ورقة مرجعية

تحتوي أصناف جافا سكريبت (JavaScript classes) على مستويين من الخصائص والأساليب:

  • على مستوى النسخة (Instance-level): تنتمي إلى كل كائن فردي يتم إنشاؤه من الصنف
  • على مستوى الصنف (Class-level): تنتمي إلى الصنف نفسه، وليس إلى النسخ

أساليب النسخة (Instance Methods):

الأساليب العادية التي يمكنها الوصول إلى خصائص النسخة باستخدام this:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

const myCar = new Car("Toyota");
console.log(myCar.drive()); // "The Toyota is driving"

الأساليب الساكنة (Static Methods):

استخدم الكلمة المفتاحية static لإنشاء أساليب تنتمي إلى الصنف نفسه. يتم استدعاؤها على الصنف، وليس على النسخ:

class Car {
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

// الاستدعاء على الصنف نفسه
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// استدعاء الأسلوب على نسخة يؤدي إلى حدوث خطأ
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

تعد الأساليب الساكنة مفيدة للوظائف المساعدة (utility functions) التي لا تعتمد على بيانات نسخة معينة.

جرّب بنفسك

import { Calculator } from './calculator.js';


// لا تقم بتعديل الكود أدناه
const calc = new Calculator(5);        // ينشئ آلة حاسبة بقيمة = 5
const result1 = calc.add(3);           // يجب أن يضيف 3 ← 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // يجب أن يضرب 4 × 6 = 24
console.log(result1);                   // المتوقع: 8
console.log(result2);                   // المتوقع: 24
quiz iconاختبر نفسك

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

جميع دروس Object Oriented Programming