בעקבות עיון זריז ברשימת היכולות החדשות של Firefox 45 קפצה לי לעין התמיכה ב ES6 Classes. בדיקה זריזה בכרום הראתה שאכן שני הדפדפנים מיושרים והפיצ'ר עובד בשניהם ללא טרנספילציה.

1. דוגמא קצרה למחלקה

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

See the Pen LNyvgY by Ynon Perek (@ynonp) on CodePen.

המילה this מתפקדת כמו שהייתם מצפים ממחלקה ב Java או C++, הפונקציות מוגדרות אוטומטית על ה Prototype והמילה constructor מגדירה קוד שירוץ בעקבות קריאה ל new. ויש אפילו extends בשביל מחלקות יורשות.

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

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

2. חשוב לזכור: bind

הבדל אחד שעדיין קיים בין המודל של JavaScript למודל המקביל מ Java הוא החיבור הדינמי של המילה this. ב JavaScript המילה this מקבלת את משמעותה בעת הפעלת הפונקציה ולא בעת יצירת האוביקט. מסיבה זו נסיון לחבר מתודה של המחלקה לאירוע נדון לכשלון (המילה this תצביע על האוביקט הלא נכון):

// FOLLOWING DOES NOT WORK AS EXPECTED
var b = document.querySelector('button');
b.addEventListener('click', c.eat);

תיקון אפשרי אחד הוא להשתמש ב bind בעת חיבור קוד הטיפול באופן הבא:

var b = document.querySelector('button');
b.addEventListener('click', c.eat.bind(c));

פתרון נוסף הוא להשתמש ב bind בבנאי כמו בדוגמא הבאה:

See the Pen ZWKZZV by Ynon Perek (@ynonp) on CodePen.

3. ואגב גם פונקציות חץ נתמכות בשני הדפדפנים

השוס השני הוא פונקציות חץ שנתמכות באופן טבעי בשני הדפדפנים ומאפשרות כתיבת קוד פונקציונאלי מאוד קריא, כמו למשל הקטע הבא שמוצא את כל המספרים שמתחלקים ב-3:

var numbers = [1, 2, 5, 9, 10, 11, 12, 13, 15, 16, 17, 20, 22, 24];
var triples = numbers.filter(x => x%3 == 0);

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

שילוב של פונקציות חץ ומחלקות מאפשר כתיבה נקיה של קוד עבור Reusable Components, בהנחה כמובן שאתם מרגישים בנוח עם פיתוח מונחה עצמים.