ECMAScript 6 proxy

אחד הפיצ'רים המעניינים ב-ECMAScript 6 הוא פרוקסי. פרוקסי הוא פיצ'ר שפחות מתייחסים אליו בהרבה מדריכים של ES6 כי התמיכה בו היתה עד לא מזמן קלושה למדי, אפילו עם ב-TypeScript\Babel וגם כי הוא קשור למושג האפלולי-משהו Metaprogramming שמשמעותו היא תוכנות שמשתמשות בתוכנות אחרות כקלט שלהן.

טוב, מספיק עם הפחדות. פרוקסי ב-JavaScript הוא לא מאוד מסובך. בגדול מדובר בדרך לעטוף אובייקט A באובייקט B וכך לשלוט או לנטר דברים שמשתנים בו. כלומר אני יכול לשלוט לחלוטין על אובייקט ב-JavaScript, התכונות והמתודות שלו באמצעות הפרוקסי.

יש לנו שלושה מונחים שאנחנו צריכים לזכור:

1. target – המטרה. זה האובייקט שאותו אנחנו עוטפים.
2. hanlder – אובייקט שמכיל את הפעולות שאנחנו רוצים לתפוס במטרה – למשל set, get, apply.
3. trap -זו הפעולה. אני אגדיר get trap אם אני רוצה לתפוס את get למשל.

יותר מדי תיאוריה בלי קוד זה לא טוב לבריאות. הנה דוגמת ה-hello world:

var data = {  
  name: 'Billy Bob',
  age: 15
};

var handler = {  
  get(target, key, proxy) { //This is the trap
    const today = new Date();
    console.log(`GET request made for ${key} at ${today}.`);
  }
}

var data = new Proxy(data, handler);

// This will execute our handler, log the request, and set the value of the `name` variable.
var name = data.name;

מה הולך פה? אני מגדיר אובייקט חביב שקוראים לו data. זה האובייקט שאני הולך 'לעטוף'. מייד אחר כך אני יוצא handler שיש בו trap. ה-handler הוא אובייקט פשוט שמכיל את כל ה-traps. במקרה הזה יש לי רק אחד שהוא ה-get. כלומר, כל פעם שמישהו יקרא לאיזושהי תכונה באובייקט המקורי, פונקצית ה-get ב-handler תופעל.

הקשירה עצמה של הפרוקסי נעשית בשורה
var data = new Proxy(data, handler);

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

בוא נדגים את זה עם trap אחר. למשל set שמופעל בכל פעם שמישהו משנה את תכונות האובייקט שלי.

var object = {};

var handler = {  
  set(target, key, value, receiver) { //This is the trap
    console.log(`SET request made for ${key}, value ${value}`);
  }
}

var object = new Proxy(object, handler);

object.someProp = 'Moshe'; //"SET request made for someProp, value Moshe"

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

יש לנו לא מעט traps. ראינו עכשיו את get ו-set. כאשר לכל אחד מהם יש ארגומנטים אחרים. יש גם למשל construct, שמופעל בכל פעם שיש לנו new. למשל:

var myFunc = function() {};

var handler = {  
  construct(target, argumentsList, newTarget) { //This is the trap
    console.log('activated!')
    console.log(argumentsList)
  }
}

var myFunc = new Proxy(myFunc, handler);
var whatever = new myFunc('arg1', 'arg2'); //"activated!", ["arg1", "arg2"]

רשימה נאה של כל ה-traps אפשר למצוא כרגיל ב-MDN.

עכשיו נשאלת השאלה מה אפשר לעשות עם זה. הו הו הו. השימוש הראשון הוא ללוגים/דיבאגינג שקט בלי להפריע לאף אחד. אם יש לכם משהו שאתם רוצים לעשות לו לוגינג, עם פרוקסי זה ממש קל. גם בדיקות/ולידציות למיניהן הן ממש פשוטות עם פרוקסי.
מה שלא כדאי לעשות עם פרוקסי זה לנסות לעשות private ל-class. למרות שפרוקסי יכול בהחלט לדמות (סוג של) כימוס בג'אווהסקריפט, זו לא המטרה שלו והייתי נמנע מזה.