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

חלק מהיחידה תכנות מונחה עצמים במסלול ה-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