ניסוי #32: ייצור אייפון 6 באמצעות ES6 class

מטרת הניסוי

לייצר אובייקט המייצג מכשיר ״אייפון 6״,
היורש מהמחלקות ״טלפונים״ ו-״מכשירים״
באמצעות class וירושה.

15379822426_a28b487bbb_z

הציוד הדרוש

עורך טקסט, דפדפן נתמך.

רקע

מהי מחלקה (class)?

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

ממה מורכבת מחלקה?

  • שם המחלקה
  • פונקציות

למשל:

class Animal {
  fly() {
    this.isFlying = true;
  }
  getState() {
    if (this.isFlying) {
      return "Flying";
    }
  }
}

המחלקה כוללת 2 פונקציות:

  • fly
  • getState

שתי הפונקציות תהיינה זמינות עבור כל מופע של המחלקה ״Animal״.

כיצד יוצרים מופע של מחלקה?

let bird = new Animal();
bird.fly();

כיצד מאתחלים מחלקה, עם מידע קבוע-מראש?

נאתחל ״חיה״ מסוג ״ציפור״, עם מידע קבוע-מראש – ״צבע צהוב״.

class Animal {
  constructor(color) {
    this.color = color;
  }
}
let bird = new Animal("yellow");

כיצד קובעים התנהגות קבועה-מראש, עבור המידע הקבוע-מראש?

ניתן לקבוע התנהגות קבלה/שליחה (get/set) בעת האתחול.
למשל נגדיר :

  • קבלה של שם-הצבע ללא-רווחים (״ ״).
  • שליחה של שם-הצבע, רק אם הוא שונה מהצבע הקודם.
class Animal {
  constructor(color) {
    this.color = color;
  }
  get color() {
    return this.color.split(" ").join("");
  }
  set color(newColor) {
    if (newColor){
      return this.color = newColor;
    }
  }
}
let bird = new Animal("y ellow"); // "yellow"
bird.color = "blue"; // "blue"

כיצד יורשים ממחלקה?

class Bear extends Animal {
  constructor() {
    super("brown");
  }
}

האובייקט super מייצג את המחלקה ממנה אנו יורשים:

let pooh = new Bear();
console.log(pooh.color); // "brown"

מהלך הניסוי


יצירת מחלקת ״מכשירים״

כל מכשיר מכיל את התכונות רוחב וגובה מסך
(תכונות אלה משותפות לכל ה"מכשירים" ולכן הן שייכות למחלקה זו).

class Device {
  constructor(screenWidth, screenHeight) {
    this.screenWidth = screenWidth;
    this.screenHeight = screenHeight;
  }
}


יצירת מחלקות עבור מוצרי אפל השונים: מחשבים, טאבלטים…

המשותף לכולם הוא שהם מכשירים בעלי מימדי-מסך,
לכן הם יורשים מהמחלקה ״מכשירים״.

class Computer extends Device { }

class Tablet extends Device { }

class Television extends Device { }

class Watch extends Device { }

class Phone extends Device { }


הוספת תכונה ייחודית למחלקת ״טלפונים״.

למשל: ״גרסת כרטיס הסים״, אשר לא-קיימת במכשירים האחרים.

class Phone extends Device {
  constructor(screenWidth, screenHeight, simVersion) {
    super(screenWidth, screenHeight);
    this.simVersion = simVersion;
  }
}

יצירת מכשיר אייפון 6
(ממחלקת ״טלפונים״)

let iphone6 = new Phone(375, 667, 'nano');
console.log('Sim version', iphone6.simVersion);  // 'Sim version nano'
console.log('Screen size', iphone6.screenWidth, 'x', iphone6.screenHeight); // 'Screen size 375 x 667'

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

class Phone extends Device {
  constructor(screenWidth, screenHeight, simVersion) {
    super(screenWidth, screenHeight);
    this._simVersion = simVersion;
  }
  get simVersion() {
   	 return this._simVersion;
  }
  set simVersion(simVersion) {
    if (simVersion !== 'micro' && simVersion !== 'nano'){
      console.log('Sim card is not supported');
    }
  }
}

שינוי ״גרסת כרטיס הסים״ ללא-מתאימה,
תציג שגיאה, בהתאם למוגדר בפונקציית השליחה (set).

iphone6.simVersion = "mini"; // 'Sim card is not supported'

תוצאות הניסוי: