ברמת המחלקה לעומת ברמת המופע

חלק מהיחידה תכנות מונחה עצמים במסלול ה-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. מתודת מופע <strong>add(number)</strong>

מוסיפה את המספר הנתון לערך הנוכחי של המחשבון
מעדכנת את this.value ומחזירה את הערך החדש
*מפעילים אותה על מופעים של המחשבון: calc.add(3)

2. מתודה סטטית <strong>multiply(num1, num2)</strong>

מקבלת שני מספרים ומחזירה את המכפלה שלהם
אינה משתמשת ב־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