אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » JavaScript כשפה מונחית עצמים

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

רן בר-זיק ינואר 13, 2010 3:22 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
OOP סקריפטים
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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