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

جزء من قسم البرمجة كائنية التوجه في رحلة JavaScript على Coddy. الدرس 31 من 56.

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

مستوى الكائن: الخصائص والأساليب التي تنتمي إلى كل كائن فردي مُنشأ من الصنف.
مستوى الصنف: الخصائص والأساليب التي تنتمي إلى الصنف نفسه، وليس إلى الكائنات.

لنفهم الفرق:

أولاً، لنلقِ نظرة على الأعضاء على مستوى الكائن. أنشئ صنفًا عاديًا يحتوي على طريقة كائنية:

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

أنشئ كائنًا من الفئة Car:

const myCar = new Car("Toyota");

استدعِ طريقة المثيل:

console.log(myCar.drive()); // المخرجات: "The Toyota is driving"

لاحظ أن كل مثيل يمكنه استدعاء الطريقة drive، التي تشترك فيها جميع المثيلات، وداخلها يشير this إلى المثيل الذي استُدعيت عليه، لذا فهي تقرأ خصائص ذلك المثيل نفسه.

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

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}`;
  }
}

تكون الأساليب الساكنة مفيدة لدوال الأدوات التي لا تعتمد على بيانات مثيل محدد. يُستدعى الأسلوب الساكن على الفئة نفسها، وليس على المثيلات:

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

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

ستؤدي محاولة استدعاء طريقة ثابتة على نسخة إلى حدوث خطأ:

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

التحدي

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

1. طريقة كائنية add(number)

تضيف الرقم المعطى إلى القيمة الحالية للحاسبة
تحدّث this.value وتُعيد القيمة الجديدة
*يتم استدعاؤها على كائنات الحاسبة: calc.add(3)

2. طريقة ثابتة multiply(num1, num2)

تأخذ رقمين وتُعيد حاصل ضربهما
لا تستخدم this (فالطرق الثابتة لا تملك بيانات الكائن)
*يتم استدعاؤها على فئة Calculator نفسها: Calculator.multiply(4, 6)

جرّب بنفسك

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