פונקציות חץ לעומת פונקציות רגילות ב-JavaScript

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

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

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

מהן פונקציות החץ של JavaScript?

פונקציות החץ של JavaScript הם דרך חלופית להגדיר פונקציות שאינן משתמשות בברירת המחדל פוּנקצִיָה מילת מפתח:

פוּנקצִיָהlogMessage(הוֹדָעָה) {
לְנַחֵם.log (הודעה);
}
const logMessage = (הוֹדָעָה) => {
לְנַחֵם.log (הודעה);
}
const logMessage = הוֹדָעָה =>לְנַחֵם.log (הודעה);

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

JavaScript אימצה לראשונה את תחביר פונקציית החץ עם שחרורו של תקני ECMAScript 2015. פונקציות החץ הציעו דרך נקייה ותמציתית ליצור במהירות פונקציות ופתרון מעניין למספר בעיות טווח ארוך בתוך JavaScript.

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

במה שונות פונקציות החצים מפונקציות רגילות ב-JavaScript?

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

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

הבדל בהיקף

בכל פעם שפונקציה רגילה מוצהרת ב-JavaScript, זה הפונקציה פועלת כסגירה שיוצרת היקף משלה. זה יכול לגרום לבעיה בעת שימוש בפונקציות מיוחדות מסוימות כמו setTimeout ו setInterval.

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

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

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

פוּנקצִיָהdelayedMessage(הודעה, עיכוב) {

 setTimeout(פוּנקצִיָה(הוֹדָעָה) {
לְנַחֵם.log (הודעה);
 }, עיכוב);
}
delayedMessage("שלום עולם", 1000);

הפונקציה פשוטה, מקבלת הוֹדָעָה ו לְעַכֵּב באלפיות שניות. לאחר שהעיכוב יעבור, הוא אמור לרשום את ההודעה למסוף. עם זאת, כאשר הקוד מבוצע, לא מוגדר יירשם למסוף במקום ההודעה שהועברה.

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

פונקציית חץ היא תיקון מתאים לבעיה זו. אם תחליף את הטיעון הראשון עבור setTimeout, ניתן לשמור על ה-scope, ולפונקציה תהיה גישה להודעה שהועברה אליה delayedMessage.

פוּנקצִיָהdelayedMessage(הודעה, עיכוב) {

 setTimeout(() => {
לְנַחֵם.log (הודעה);
 }, עיכוב);
}
delayedMessage("שלום עולם", 1000);

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

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

קריאת קוד

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

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

מעמדדֶלְפֵּק{
 _count = 0;
 תוספת = () => {
זֶה._count += 1;
 }
 ירידה = () => {
זֶה._count -= 1;
 }
 לספור = () => {
לַחֲזוֹרזֶה._לספור;
 }
}
לתת ct = חָדָשׁ דֶלְפֵּק();

תפקיד בתכנות מונחה עצמים

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

מעמדorderLineItem{
 _LineItemID = 0;
 _מוצר = {};
 _כמות = 1;
בַּנַאִי(מוצר) {
זֶה._LineItemID = crypto.randomUUID();
זֶה._מוצר = מוצר
 }
 changeLineItemQuantity = (newQty) => {
זֶה._Qty = newQty;
 }
}

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

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

מתי כדאי להשתמש בפונקציות החץ של JavaScript?

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

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

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