JavaScript כשפה מונחית עצמים

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

כאשר אנו משתמשים ב-jQuery, אין לנו ברירה ואנו חייבים להשתמש באובייקטים. אבל עם קצת מאמץ, אפשר להשתמש ב-JavaScript באופן שהוא הרבה יותר OOP ממה שאנו משתמשים בה היום.

הגדרת אובייקט (Object Literal)

קל להגדיר אובייקט. כידוע, לאובייקט יש שני אלמנטים מרכזיים: תכונות (Properties) שמכילים מידע על האובייקט ומתודות (Methods) שמכילות פונקציות שמשמשות את האובייקט. הגדרת אובייקט היא כמו כל הגדרה של מחרוזת או הגדרה בוליאנית. על מנת להגדיר אובייקט מסוג 'כדור' עם תכונה של צבע ורדיוס, אני כותב את הקוד הבא:

var circle = {
  radius : 9,
  color : red,
};

אני יכול כמובן לפרט כמה תכונות שאני רוצה. הגדרת אובייקט עם מתודה גם היא פשוטה למדי. ראשית אני אגדיר פונקציה (שהיא המתודה שלי) ואז אני אגדיר אותה באובייקט שלי באופן קרוב עד כמה שניתן ב-JS לכימוס.

var circle = {
  radius : 9,
  color : red,
  getArea : function()
  {
    return (this.radius * this.radius) * Math.PI;
  }
};

הגדרת אובייקט (Not Literal)

דרך נוספת להגדיר אובייקט היא באמצעות אופרטור new. האופרטור מאפשר לנו לבנות אובייקט ואז ליצור אותו מחדש כמה פעמים. אנו משתמשים באופרטור new ב-JS כאשר אנו משתמשים באובייקטים קבועים כמו למשל Date. אנחנו יכולים ליצור אובייקטים משלנו שיהיו זמינים עבור אופרטור new. לאובייקטים אלו יש constructor ואפשרות להפעיל מתודות.

function circle(radius)
{
  this.radius = radius;
  this.getArea = function()
  {
    return (this.radius * this.radius) * Math.PI;
  };
// על הקונסרקטור להחזיר תמיד true
  return true;
}

לאחר שיצרנו את ה-Blue Print של האובייקט, אפשר ליצור אותו עם האופרטור new:

var obj_myCircle = new circle(9);

ואנו יכולים לגשת למתודות או לתכונות באמצעות האובייקט שלנו:

var myCircle_area = obj_myCircle.getArea();

הוספת מתודות ותכונות לאובייקט קיים באמצעות prototype

prototype היא פונקציה ב-JavaScript שבאמצעותה ניתן להוסיף מתודות ותכונות לכל אובייקט קיים שהוא. כך למשל, אם אני ארצה להוסיף תכונת צבע לאובייקט עיגול (circle) שיצרתי. כל שעלי לעשות הוא להריץ את השורה הבאה:

circle.prototype.color = 'red';

הוספת מתודה גם היא פשוטה ביותר:

circle.prototype.getCircumference = function()
{
  return this.radius * Math.PI * 2;
}

באותה דרך אני יכול לעשות הורשה, לקחת אובייקט קיים (לצורך העניין אובייקט pizza) שיירש מאובייקט עיגול.

// אובייקט עיגול
function circle(radius)
{
  this.radius = radius;
  this.getArea = function()
  {
    return (this.radius * this.radius) * Math.PI;
  };

  return true;
}

// אובייקט פיצה
function pizza()
{
  this.flavour = olives;
  return true;
}

//והנה ההורשה!
pizza.prototype = new circle(9);
//ניצור את האובייקט ויהיו לנו את התכונות של המוריש!
var myPizza = new pizza();
var pizza_area = myPizza.getArea();

Frameworks של JavaScript כמו jQuery ו-Dojo מחייבים אותנו לא מעט פעמים לעבוד באופן שהוא הרבה יותר מונחה עצמים מבעבר. נכון שלעתים לקחת שפה כמו JavaScript ולהשתמש בה כ-OOP טהור נראה קצת מאולץ. אבל יש הגיון רב בעבודה עם JavaScript כ-OOP ולפי ההדגמה שהראיתי כאן אפשר לעשות את זה ובקלות יחסית.