פונקציות החצים נקיות ופשוטות יותר מהחלופה הרגילה הארוכה שלהן, אך אל תמהרו להשתמש בהן מבלי לדעת כיצד הן פועלות.
תחביר פונקציית החץ הגיע עם שחרורו של ECMAScript 2015, הידוע גם בשם ES6. כיום, פונקציות החצים הפכו לתכונה המועדפת על מתכנתי JavaScript רבים. אהבה זו לפונקציות חצים נובעת מהתחביר התמציתי וההתנהגות הפשוטה של מילת המפתח "זה".
אבל לפונקציות החצים יש כמה חסרונות. למד על ההבדלים העיקריים בין פונקציות חצים לפונקציות רגילות וגלה מדוע, ברוב המקרים, עדיף לך לדבוק בפונקציות רגילות.
1. עליך להגדיר פונקציית חץ לפני השימוש בה
אתה לא יכול להניף פונקציית חץ. כללי ההרמה המוגדרים כברירת מחדל של JavaScript מאפשרים לך לקרוא לפונקציה לפני הגדרתה, אבל זה לא המקרה עם פונקציות חצים. אם יש לך קובץ JavaScript עם פונקציות, זה אומר שכל הקוד החשוב יהיה למטה בתחתית הקובץ.
שקול לדוגמא את קוד ה-JavaScript הבא:
const doubleNumbers = (מספרים) {
numbers.map(נ => n * 2)
}const halveNumbers = (מספרים) {
numbers.map(נ => n / 2)
}const sumNumbers = (מספרים) {
numbers.reduce((סכום, נ) => {
לַחֲזוֹר סכום + n;
}, 0)
}
const מספרים = [1, 20, 300, 700, 1500]
const כפול = כפול מספרים (מספרים)
לְנַחֵם.log (halveNumbers (כפול))
לְנַחֵם.log (sumNumbers (numbers))
בגוש הקוד שלמעלה, הקוד החשוב נמצא למטה בתחתית. פונקציות העזר מוגדרות כולן לפני נקודת הביצוע. חייב ל צור את פונקציות ה-JavaScript שלך בחלק העליון של הקובץ יכול להיות לא נוח כי תצטרך לגלול למטה כדי לראות את הקוד בפועל שעושה את העבודה.
אם העברת את פונקציות העזר לתחתית ואת הקוד בפועל למעלה, תקבל שגיאת התייחסות. זמן הריצה מתייחס לפונקציה כאל משתנה. לפיכך, עליך להגדיר אותו תחילה לפני גישה או הפעלתו. אבל אם המרת את כל פונקציות החצים לפונקציות רגילות (עם ה פוּנקצִיָה מילת מפתח), אז הקוד שלך יעבוד מצוין. יחד עם זאת, הקוד החשוב נשאר בחלק העליון שבו אתה יכול לאתר אותו.
זוהי אחת הבעיות הגדולות ביותר בשימוש בפונקציות חצים. הם לא מפגינים שום התנהגות אירוח. במילים אחרות, עליך להגדיר אותם לפני המקום שבו תשתמש בהם בפועל. מצד שני, אתה יכול להניף פונקציות רגילות.
2. פונקציות החצים עשויות לבלבל אנשים מסוימים
סיבה נוספת להשתמש בפונקציות רגילות במקום בפונקציות חצים היא הקריאה. קל יותר לקרוא פונקציות רגילות מכיוון שהן משתמשות במפורש ב- פוּנקצִיָה מילת מפתח. מילת מפתח זו מזהה שהקוד המדובר הוא פונקציה.
מצד שני, אתה מקצה פונקציות חץ למשתנים. בתור חדש, זה עלול לבלבל אותך לחשוב שהקוד הוא משתנה ולא פונקציה.
השווה בין שתי הפונקציות הבאות:
const halveNumbers = (מספרים) => {
לַחֲזוֹר numbers.map(נ => n / 2)
}
פוּנקצִיָהחצי מספרים(מספרים) {
לַחֲזוֹר numbers.map(נ => n / 2)
}
במבט ראשון, אתה יכול בקלות לדעת שחלק הקוד השני הוא פונקציה. התחביר מבהיר שהקוד הוא פונקציה. עם זאת, הראשון הוא מעורפל - ייתכן שלא תוכל לדעת בקלות אם זה משתנה או פונקציה.
3. אינך יכול להשתמש בפונקציות החץ כשיטות
כאשר אתה משתמש בפונקציית חץ, ה זֶה מילת מפתח מתאימה לכל מה שנמצא מחוץ לדבר שאנחנו בתוכו. ברוב המקרים, זה אובייקט החלון.
שקול את האובייקט הבא:
const אדם = {
שם פרטי: "קייל",
שם משפחה: "לְבַשֵׁל",
שם הדפסה: () => {
לְנַחֵם.עֵץ(`${זֶה.שם פרטי}``${זֶה.שם משפחה}` )
}
}
person.printName()
אם תפעיל את הקוד, תבחין שהדפדפן מדפיס לא מוגדר הן עבור השם הפרטי והן עבור שם המשפחה. מכיוון שאנו משתמשים בפונקציית חץ, זֶה מילת המפתח מתאימה לאובייקט החלון. כמו כן, אין שם פרטי אוֹ שם משפחה נכס המוגדר שם.
כדי לפתור בעיה זו, עליך להשתמש בפונקציה רגילה במקום זאת:
const אדם = {
שם פרטי: "קייל",
שם משפחה: "לְבַשֵׁל",
שם הדפסה: פוּנקצִיָה() {
לְנַחֵם.עֵץ(`${זֶה.שם פרטי}``${זֶה.שם משפחה}` )
}
}
person.printName()
זה יעבוד בסדר כי זֶה מתייחס ל אדם לְהִתְנַגֵד. אם אתה מתכוון לעשות הרבה תכנות מונחה עצמים מסוג זה, אז תצטרך לוודא שאתה משתמש בפונקציות רגילות. פונקציות החצים לא יעבדו.
מתי להשתמש בפונקציות החצים
השתמש בפונקציות חצים בעיקר במקומות שבהם אתה צריך פונקציה אנונימית. דוגמה לתרחיש כזה היא התמודדות עם פונקציית התקשרות חוזרת. עדיף להשתמש בפונקציית חץ בעת כתיבת התקשרות חוזרת מכיוון שהתחביר הוא הרבה יותר פשוט מכתיבת פונקציה מלאה.
השווה את שני אלה והחליט מה יותר פשוט:
פוּנקצִיָהחצי מספרים(מספרים) {
לַחֲזוֹר numbers.map(נ => n / 2)
}
פוּנקצִיָהחצי מספרים(מספרים) {
לַחֲזוֹר numbers.map(פוּנקצִיָה(נ) {
לַחֲזוֹר n / 2
})
}
שני המקרים מעבירים פונקציית callback לשיטת map(). אבל ההתקשרות הראשונה היא פונקציית חץ ואילו השנייה היא פונקציה מלאה. אתה יכול לראות כיצד הפונקציה הראשונה תופסת פחות שורות קוד מהפונקציה השנייה: שלוש לעומת. חָמֵשׁ.
הזמן הנוסף להשתמש בפונקציות החצים הוא בכל פעם שאתה רוצה להתמודד עם תחביר "זה" מסוים. האובייקט "זה" ישתנה בהתאם אם אתה משתמש בפונקציות רגילות או בפונקציות חצים עבור דברים מסוימים.
בלוק הקוד הבא רושם שני מאזיני אירועי "קליק" על אובייקט המסמך. המופע הראשון משתמש בפונקציה רגילה כהתקשרות חוזרת, בעוד שהשנייה משתמשת בפונקציית חץ. בתוך שתי ההתקשרויות, הקוד רושם את אובייקט הביצוע (זה) ואת יעד האירוע:
מסמך.addEventListener("נְקִישָׁה", פוּנקצִיָה(ה) {
לְנַחֵם.עֵץ("פוּנקצִיָה", זֶה, e.target)
})
מסמך.addEventListener("נְקִישָׁה", (ה) => {
לְנַחֵם.עֵץ("חֵץ", זֶה, e.target)
})
אם היית מריץ את הסקריפט הזה, תבחין שההפניה "זה" שונה עבור שניהם. עבור הפונקציה הרגילה, מאפיין זה מתייחס למסמך, שהוא זהה ל- e.target תכונה. אבל עבור פונקציית החץ, זה מתייחס לאובייקט החלון.
כאשר אתה משתמש בפונקציה רגילה כהתקשרות חוזרת, זה יתייחס לאלמנט שבו אנו מפעילים את האירוע. אבל כאשר אתה משתמש בפונקציית חץ, מילת המפתח הזו היא ברירת המחדל לאובייקט החלון.
למידע נוסף על פונקציות חץ לעומת פונקציות רגילות
ישנם עוד כמה הבדלים עדינים בין פונקציות רגילות לפונקציות חצים. שליטה בשני סוגי הפונקציות היא הבסיס להשגת שליטה ב-JavaScript. למד מתי להשתמש באחד ומתי להשתמש בשני; לאחר מכן תבין את ההשלכות של שימוש בפונקציה רגילה או בפונקציית חץ ב-JavaScript שלך.
