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

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

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

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

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

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

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

הסבר על הום אסיסטנט, מערכת הקוד הפתוח לבית חכם ואיך לחבר אליה מיקרובקרים.

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