Connect with us

קטגוריות

Javascript

Javascript: יש לנו קלאסים! (טוב… לא בדיוק)

ES6 הציגה לנו המון חידושים ושיפורים אחד מהם זה קלאסים (class), עד אז ל-Javascript הייתה דרך יחודית ושונה מכל שפה פופולרית אחרת לממש את ירושת ה-prototype, אבל אנשים שהגיעו משפות כמו Java או פייטון  (היו חייבים להרוס את המסיבה) התקשו להבין את ירושת ה-prototype אז החבר׳ה מ-TC39 הציגו מן דרך חדשה ושתיהיה מוכרת למפתחים שמגיעים משפות שונות לממש את ירושת ה-prototype עם דרך שתראה להם מוכרת.

חשוב לזכור שקלאסים ב-Javascript הם רק syntactic sugar, מאחורי הקלעים הדברים מתבצעים באותה הדרך.

אז בואו נראה איך נראה class בשפת javascript:

class Car {
  constructor(licensePlate) {
    this.licensePlate = licensePlate
  }

  getLicensePlate() {
    return this.licensePlate
  }
}

לכל קלאס ישנו מזהה שאיתו אנחנו יכולים ליצור מופעים (instances) בצורה הבאה:

const myCar = new Car('WEEWEE');

כשאנחנו מאתחלים את הקלאס, ה-constructor נקרא פעם אחת בלבד ואליו אנחנו יכולים להעביר פרמטרים, אחרי שיצרנו מופע (instance) של הקלאס, אנחנו יכולים להשתמש בפונקציות ששייכות אליו:

const myCar = new Car('Sports Car');
console.log(myCar.getType());

קלאס יורש מקלאס

קלאס ב-Javascript יכול לבצע ירושה מקלאס אחר וכתוצאה מכך לרשת את כל הפונקציות שמוגדרות באותו קלאס.

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

class SUV extends Car {
    getLicensePlate() {
      return super.getLicensePlate() + ' AWESOME'
    }
  }
  
  const myCar = new SUV('CODEHUB IS')
console.log(myCar.getLicensePlate()) //פלט: 'CODEHUB IS AWESOME'

בדוגמא למעלה אנחנו רואים שבפונקציה getLicensePlate אנחנו יכולים לפנות לקלאס שממנו אנחנו יורשים בעזרת המשתנה super.

מה שאנחנו עוד יכולים לראות הוא שלקלאס SUV אין constructor, כשיצרנו את המופע (instance) מ-SUV בעצם השתמשנו ב-constructor של הקלאס Car.

פונקציות סטטיות

הפונקציות שאנחנו מגדירים בתוך הקלאס הן פונקציות שמוגדרות באובייקט ה-prototype של המופע (instance), פונקציות סטטיות מוגדרות על הקלאס עצמו וכתוצאה מכך, אין להם גישה ל-this.

class Car {
  static honk() {
    return 'BEEP BEEP'
  }
}

Car.honk() //פלט: BEEP BEEP

private, public ו-protected

מי שמגיע משפות אחרות, התנסה בקלאסים והתרגל לעבוד איתם בצורה מסויימת, ובכן, ב-Javascript הדברים עובדים טיפה אחרת. לקלאסים ב-Javascript אין דבר כזה private, public ו-protected, אומנם ישנה הצעה ואפילו שיחה מעניינת אבל נכון לעכשיו אין דרך רשמית.

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

GETTERS & SETTERS

אנחנו יכולים להוסיף קידומת לפונקציות של הקלאס כמו get ן-set על מנת ליצור getters ו-setters (שמוכרים לחלקכם משפות אחרות), שני קטעי קוד שונים שירוצו לפי מה שאנחנו מנסים לבצע מנסים לקבל את הערך או מנסים לשנות את הערך:

 class Car {
    constructor(license) {
      this.license = license
    }
  
    set licensePlate(value) {
      this.license = value
    }
  
    get licensePlate() {
      return this.license
    }
  }

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

class car {
    constructor(type) {
      this.type = type
    }
  
    get type() {
      return this.type
    }
  }

אם יש לנו רק setter אנחנו נוכל לשנות את הערך לא נוכל ללקבל את הערך מחוץ לקלאס.

  class car {
    constructor(type) {
      this.type = type
    }
  
    set type(type) {
      this.type = type
    }
  }
אם אתה חושב שיש מידע שהחסרתי או שיש דברים לא מדוייקים או לא מובנים במאמר, אשמח אם תאיר את עיניי באמצעות תגובה או דרך יצירת קשר בתפריט העליון.
תגובות

עוד ב Javascript

Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
קריאה מהנה.

מאמרים פופולריים

נושאים פופולריים

חזרה למעלה