מתי (ולמה) כדאי להשתמש בפונקציות חץ ES6 - ומתי לא

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

הנה פונקציה שנכתבת בתחביר ES5:

function timesTwo(params) { return params * 2}function timesTwo(params) { return params * 2 } timesTwo(4); // 8

הנה, אותה פונקציה מבוטאת כפונקציית חץ:

var timesTwo = params => params * 2 timesTwo(4); // 8

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

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

וריאציות

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

1. אין פרמטרים

אם אין פרמטרים, אתה יכול להציב סוגריים ריקים לפני =&gt ;.

() => 42

למעשה, אתה אפילו לא צריך את הסוגריים!

_ => 42

2. פרמטר יחיד

עם פונקציות אלה, סוגריים הם אופציונליים:

x => 42 || (x) => 42

3. מספר פרמטרים

סוגריים נדרשים עבור פונקציות אלה:

(x, y) => 42

4. הצהרות (בניגוד לביטויים)

בצורתו הבסיסית ביותר, ביטוי פונקציה מייצר ערך, ואילו הצהרת פונקציה מבצעת פעולה.

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

להלן דוגמה לפונקציית החץ המשמשת עם משפט if:

var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } }

5. "חסום גוף"

אם הפונקציה שלך נמצאת בבלוק, עליך להשתמש גם returnבהצהרה המפורשת :

var addValues = (x, y) => { return x + y }

6. מילולי חפץ

אם אתה מחזיר אובייקט מילולי, עליו להיות עטוף בסוגריים. זה מאלץ את המתורגמן להעריך מה נמצא בסוגריים, והחפץ המילולי מוחזר.

x =>({ y: x })

אנונימית תחבירית

חשוב לציין כי פונקציות חץ הן אנונימיות, מה שאומר שהן אינן נקראות.

אנונימיות זו יוצרת כמה בעיות:

1. קשה יותר לניפוי באגים

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

2. ללא התייחסות עצמית

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

היתרון העיקרי: אין כריכה של 'זה'

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

לדוגמה, עיין setTimeoutבפונקציה למטה:

// ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } };

בדוגמת ES5, .bind(this)נדרש כדי להעביר את thisההקשר לפונקציה. אחרת, כברירת מחדל thisלא תהיה מוגדרת.

// ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } };

לא ניתן לקשור פונקציות חץ ES6 thisלמילת מפתח, כך שהיא תעלה באופן מילולי לטווח, ותשתמש בערך thisבהיקף בו הוגדרה.

כשאתה לא צריך להשתמש בפונקציות חץ

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

להלן מספר מקרים שבהם ככל הנראה לא תרצה להשתמש בהם:

1. שיטות אובייקט

כשאתה מתקשר cat.jumps, מספר החיים אינו יורד. הסיבה לכך thisהיא שאינה קשורה לשום דבר, והיא תירש את הערך thisמההיקף האב שלה.

var cat = { lives: 9, jumps: () => { this.lives--; } }

2. פונקציות להתקשרות חוזרות עם הקשר דינמי

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

var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });

אם נלחץ על הכפתור נקבל TypeError. הסיבה לכך thisאינה קשורה לכפתור, אלא קשורה להיקף האב שלו.

3. כשזה הופך את הקוד שלך לקריא פחות

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

מתי כדאי להשתמש בהם

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

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

תודה שקראת את המאמר שלי, ושתף אם אהבת! בדוק את המאמרים האחרים שלי כמו איך בניתי את אפליקציית שעון ה- Pomodoro שלי, ואת הלקחים שלמדתי בדרך, ובוא להסיר את מילת המפתח 'החדשה' של JavaScript.