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

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