למרות הדימיון השטחי, המנגנון של פיתוח מונחה עצמים ב JavaScript עובד בצורה די שונה מזה של Java או כל שפה אחרת שמשתמשת במילה class כדי להגדיר מחלקה. ודווקא כשאנחנו זוכרים את הכאוס שמסתתר מתחת לפני השטח ב JavaScript נפתחות הזדמנויות לפיתוח קוד גנרי ומעניין.

קחו לדוגמא את הריבוע הזה שמחליף צבעים:

class ColorChanger {
  constructor(root) {
    this.el = document.createElement('div');
    root.appendChild(this.el);
    this.el.style.width = '100px';
    this.el.style.height = '100px';
    this.el.style.border = '2px solid';
  }

  red() {
    this.el.style.backgroundColor = 'red';
  }

  blue() {
    this.el.style.backgroundColor = 'blue';
  }

  yellow() {
    this.el.style.backgroundColor = 'yellow';
  }
}

const c = new ColorChanger(document.body);

אם תוסיפו אותו לקוד שלכם תוכלו להשתמש במשתנה c כדי להחליף את הצבע של הריבוע באמצעות הפעלת הפונקציות המתאימות. הפקודה:

c.red();

תצבע את הריבוע באדום, קריאה ל c.blue() תצבע אותו בכחול ו c.yellow() בצהוב. אבל ברור שזה לא הקוד שהכי נעים להסתכל עליו או לתחזק אותו. כל פעם שנרצה להוסיף צבע נצטרך להוסיף עוד פונקציה שלמה ולשכפל את השורה שצובעת את תוכן הריבוע.

אבל יש דרך קלה לקצר קוד כזה, והיא השימוש ב Prototype. במקום להגדיר כל פונקציה בנפרד, נוכל להגדיר את כל פונקציות הצבעים בלולאה מחוץ לקוד המחלקה. זה נראה כך:

class ColorChanger {
  constructor(root) {
    this.el = document.createElement('div');
    root.appendChild(this.el);
    this.el.style.width = '100px';
    this.el.style.height = '100px';
    this.el.style.border = '2px solid';
  }
}

for (let clr of ['red', 'blue', 'yellow']) {
  ColorChanger.prototype[clr] = function() {
    this.el.style.backgroundColor = clr;
  };
}

בצורה כזאת אנחנו יכולים להוסיף כל צבע שנרצה ובאופן אוטומטי הלולאה תייצר את הפונקציה המתאימה.