ECMAScript 6 symbol

על היכולת החדשה ב-ES6 ליצור מסמן ייחודי

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

באופן עקרוני, Symbol זה סוג פרימיטיבי של מידע ייחודי, מיוחד שאינו חוזר על עצמו ואינו ניתן לשינוי. מייצרים אותו עם Symbol (ללא new כי זה פרימיטיב).


var oneSymbol = Symbol();
var twoSymbol = Symbol();
console.log(oneSymbol === twoSymbol); //false

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

לשם דיבאגינג בלבד, אני יכול להכניס תיאור ל-symbol, אבל הוא יהיה זמין בקונסול בלבד:


var oneSymbol = Symbol('this is a descriptive description');
console.log(oneSymbol); //Symbol(this is a descriptive description)

ככה זה יראה, אגב:

var oneSymbol = Symbol('this is a descriptive description'); console.log(oneSymbol) VM330:2 Symbol(this is a descriptive description)

אם נעשה ל-Symbol typeof, נראה שהוא בסך הכל Symbol:


var oneSymbol = Symbol();
console.log(typeof oneSymbol); //"symbol"

נשאלת השאלה למה צריך את זה, וזו שאלה מצוינת. כאשר ה-Symbol הוא לא גלובלי, השימושים שלו מועטים – בדרך כלל בכל פעם שצריך משהו ייחודי (ולפעמים צריך). יש כאלו שמשתמשים ב-Symbol כדי לסמלץ משתנה פרטי ב-class. הנה דוגמה:


class Something {
    constructor(){
var property = Symbol();
        this[property] = 'test';
    }
}

var instance = new Something();

console.log(instance[property]); //undefined, can only access with access to the Symbol

אבל לדעתי זה משהו שעדיף לא לעשות עם Symbol. הכוח הגדול של Symbol הוא דווקא בצד הגלובלי.

Symbol.for – גלובלי

פה זה כבר מתחיל להיות מעניין. בואו נעבור במהירות על ה-API.

בניגוד ל-Symbol רגיל, עם Symbol.for אני יכול לקבוע 'מפתח' ל-Symbol שהוא יוצר symbol ייחודי למפתח הזה. ואני אדגים:


var oneSymbol = Symbol.for('foo');
var secondSymbol = Symbol.for('foo');

console.log(oneSymbol === secondSymbol); //true

אם יש לי Symbol גלובלי, אני יכול למצוא אותו בקלות עם מתודת forKey:


var oneSymbol = Symbol.for('foo');
console.log(Symbol.keyFor(oneSymbol)); //foo

סבבה, נכון? אבל מה שחזק ממש הוא שה-Symbol שיווצר הוא אותו Symbol על פני חלקים שונים באפליקציה שלי. כלומר אם יש קוד שמייצר Symbol ב-iframe למשל וקוד שמייצר ב-window, זה יהיה אותו Symbol! אני אדגים:


var frame = document.createElement('iframe')
document.body.appendChild(frame)
console.log(Symbol.for('foo') === frame.contentWindow.Symbol.for('foo'))

בקוד הזה אני יוצר iframe ומדביק אותו ל-window שלי. אני יוצר Symbol גם ב-iframe וגם באפליקציה שלי ונראה שהתוצאה תהיה true.

זה מאוד מגניב וגם עלול להיות שימושי אם אני רוצה לחלוק מידע בין iframe ל-window. באופן אישי? הייתי משתמש בזה אך ורק אם אצטרך אי פעם מסמן ייחודי למשהו.

פוסטים נוספים שכדאי לקרוא

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

כל אחד יכול לשאול את GPT, אבל אם תרצו לשאול אותו שאלות על תכנות – יש כמה שיטות וטיפים ליעל את העבודה מולו.

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

פתרונות ומאמרים על פיתוח אינטרנט

רינדור של קליינט סייד עם SSR

הסבר קצר על SSR מול רינדור קלאסי ולא. לא תמיד זה טוב להשתמש בו. אין כדור כסף שיכול לפתור הכל.

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

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