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

עקרונות והסברים ליצירת סקריפטים של JavaScript לפי עקרון OOP.

באופן עקרוני 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 ולפי ההדגמה שהראיתי כאן אפשר לעשות את זה ובקלות יחסית.

פוסטים נוספים שכדאי לקרוא

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

פתרונות ומאמרים על פיתוח אינטרנט

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

גלילה לראש העמוד