אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » ECMAScript 6 » ECMAScript 6 proxy

ECMAScript 6 proxy

רן בר-זיק דצמבר 25, 2016 7:07 am אין תגובות

איך שולטים באובייקט אחד על ידי אובייקט אחר.

המאמר הקודםECMAScript 6 symbol
המאמר הבאECMAScript 6 reflect
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

אחד הפיצ'רים המעניינים ב-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. למרות שפרוקסי יכול בהחלט לדמות (סוג של) כימוס בג'אווהסקריפט, זו לא המטרה שלו והייתי נמנע מזה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
למדריך המלא של ECMAScript 6
ECMAScript 6

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד