OOP ומחלקות ב - JavaScript | מדריך

מוטי אורן

מדריך מחלקות ב - JS

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

אז ישנם שני דרכים להגדרת מחלקות ב JavaScript (אותו הדבר גם בפונקציות למי שיודע). דרך אחת, הצהרה על מחלקה באמצעות המילה class ולאחר מכן את שם המחלקה. והדרך השנייה היא, הגדרת משתנה או קבוע שיכיל את המחלקה, לדוגמה:

const MyClass = class {

};

דרך אגב, בוודאי שמתם לב שהאות הראשונה בשם של המחלקה נכתבה באות גדולה. כך מגדירים מחלקה, עם אות גדולה בתחילת שם המחלקה.

טוב. מה בעצם ההבדל? מה זה משנה איך מגדירים את המחלקה?

התשובה היא, שזה רלוונטי לעניין של ה – hoisting .hoisting פירושו הדרך שבה מנוע ה JavaScript מגדיר את הפונקציות שלנו. בוודאי ידוע לכם שאם אתם קוראים לפונקציה ורק לאחר מכן מגדירים אותה, הקריאה תעבוד ללא בעיות. משום שהמנוע של JS מגדיר דבר ראשון את כל הפונקציות בקוד, ורק לאחר מכן מבצע את הקוד. אבל מה קורה אם הגדרנו את הפונקציה באמצעות משתנה או קבוע? במקרה כזה לא יתרחש hoisting ותיזרק שגיאה מסוג referenceError. ואותו הדבר גם במחלקות.

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

class MyClass {
  constructor(value1, value2) {
    this.key1 = value1;
    this.key2 = value2;
  }
}

אם אתם מכירים כתיב של אובייקטים, הכתיב הזה צריך להיות מוכר לכם. הקונסטרקטור פשוט מאתחל את האובייקט עם המפתחות key1 ו – key2, ועם הערכים value1 ו – value2.

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

אפשר להגדיר מתודות סטטיות למחלקה, על ידי השימוש במילה static לפני המתודה. הרעיון של מתודה סטטית הוא שהיא לא מקבלת שום אובייקט this, אלא אפשר לקרוא לה רק עם שם המחלקה. לדוגמה: ()Math.random נקראת מהמחלקה עצמה, ולא כמתודה של אובייקט כלשהו.

בדרך זו ניתן גם להגדיר משתנים סטטיים למחלקה.

לגבי ירושה, ניתן להגדיר מחלקה שיורשת ממחלקה אחרת את התכונות ואת המתודות שלה באמצעות המילה extands, כך:

class AnotherClass extands MyClass {

};

בכדי להגדיר את התכונות באמצעות מחלקת העל, נשתמש ב – super כך:

class AnotherClass extands MyClass {
  constructor(value1, value2, value3) {
    super(value1, value2);
    this.key3 = value3;
  }
}

טוב, מספיק להיום. אני מותש מהנושא הזה..

נ.ב. הנושא הזה ארוך מאוד, וממש לא מיציתי אותו כאן. אם תרצו להרחיב ידע, תכנסו לקישור הזה, בהצלחה רבה.

chv

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

יהושע זופניק

@chv

:::

@chv אמר בOOP ומחלקות ב - JavaScript | מדריך:

אופן לי הקטן שלא יודע כלל

הלואי עלי להיות קטן כמוך

:::

מוטי אורן

@chv קודם כל אל תהיה כזה עניו...

בכל אופן בקשר למחלקות, האמת שאותי זה די הפתיע שזה קיים ב JS, אבל הדברים האלו באמת נוספו ב ES6.

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

let now = new Date();

Date זו מחלקה לכל דבר, שמאתחלת אובייקט של תאריך שמכוון לשעה של האיתחול. עוד דוגמה:

let regularExpression = new RegExp('something', 'igm');

regExp זוהי בסך הכל מחלקה, כך גם Date, וגם Math, וגם Number, ועוד כהנה וכהנה

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

function createObject(username, password) {
  let newObject = {};
  newObject.username = username;
  newObject.password = password;
  return newObject;
}

זה הרעיון של מחלקות בגדול.

ב.ל

@מוטי-אורן
בגדול זה ציפוי סוכר לפונקציה בנאית

function Person(first, last, age) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
}

// יצירת אוביקט חדש

let myFather = new Person("baruch", "lamdan", 50);

@chv תוכל להרחיב את המידע כאן (ויש כמובן עוד מדריכים..)

chv

@מוטי-אורן וגם @ב-ל
מדהים עכשיו הכל ברור לי.

בעצם אם הבנתי נכון - כשאני יוצר מחלקה חדשה אני יכול גם להגביל ולהגדיר את צורת הערכים שיכולים לתת למפתחות בפנים? נגיד מחלקה עם שם, וגיל - אני מגביל את 'גיל' שיוכלו להגדיר בו רק מספרים וכ' ?

נ.ב. @יהושע-זופניק אני לא חושב שיש לך מה לראות בי איזה מודל..

מוטי אורן

@chv בדיוק!!! זה המעלה הענקית בצורת עבודה הזאת