6 הבדלים בין פונקציות חץ לפונקציות רגילות ב-JavaScript

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

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

1. הבדלי תחביר

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

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

const להוסיף = (א, ב) => a + b;

בדוגמה זו, ה לְהוֹסִיף הפונקציה מקבלת שתי כניסות, א ו ב,ומחזיר את סך הכל. ה => סימן מגדיר זאת כפונקציית חץ.

מצד שני, הגדרת פונקציה רגילה דורשת שימוש ב- פוּנקצִיָה מילת מפתח, עם תחביר מילולי יותר, כפי שמוצג בדוגמה זו:

פוּנקצִיָהלְהוֹסִיף(א, ב) {
לַחֲזוֹר a + b;
}

בדוגמה זו, ה פוּנקצִיָה מילת מפתח מגדירה פונקציה רגילה המשתמשת גם בסוגרים מתולתלים וב- לַחֲזוֹר הַצהָרָה.

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

2. הבדלי היקף

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

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

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

כדי לראות את ההבדל, בדוק את הדוגמה הבאה. נניח שיש לך א אדם חפץ עם א שֵׁם נכס ושיטה שנקראת sayName() שמתעד את שמו של האדם באמצעות פונקציה רגילה:

const אדם = {
 שֵׁם: 'ג'ון,'
 תגיד שם: פוּנקצִיָה() {
לְנַחֵם.עֵץ(זֶה.שֵׁם);
 }
};
person.sayName(); // יומן 'ג'ון'

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

בוא ננסה עכשיו את אותו הדבר עם פונקציית חץ:

const אדם = {
 שֵׁם: 'ג'ון',
 תגיד שם: () => {
לְנַחֵם.עֵץ(זֶה.שֵׁם);
 }
};
person.sayName(); // יומנים לא מוגדרים

מכיוון שפונקציית החץ המשמשת ב- sayName() השיטה לא מגדירה את שלה זֶה מילת המפתח, היא משתמשת ב- זֶה של ההיקף הסטטי המקיף אותו. במקרה זה, זה ההיקף הגלובלי של המקרה.

כתוצאה מכך, כשאתה מתקשר person.sayName(), אתה מקבל לא מוגדר ולא "ג'ון." זה יכול להשפיע באופן משמעותי על אופן הכתיבה והשימוש בפונקציות בקוד שלך.

3. מקרי שימוש ושיטות עבודה מומלצות

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

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

4. הבדלי כריכת פונקציות

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

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

לעומת זאת, לפונקציות חצים אין זֶה מילת מפתח; במקום זאת, הם מקבלים את זה מההיקפים שמסביב.

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

const אדם = {
 שֵׁם: 'ג'ון',
 תגיד שם: פוּנקצִיָה() {
לְנַחֵם.עֵץ(זֶה.שֵׁם);
 }
};
const אדם אחר = {
 שֵׁם: 'ג'יין'
};
person.sayName.call (אדם אחר); // יומן 'ג'יין'

בדוגמה זו, אתה קורא לאובייקט של האדם sayName() שיטה עם הערך אדם אחר משתמש ב שִׂיחָה() שיטה. בגלל זה, ה sayName() שיטה, זֶה, מילת המפתח קשורה ל- אדם אחר אובייקט, והוא מתעד "ג'יין" ולא "ג'ון."

בוא נשתמש עכשיו באותו דבר עם פונקציית חץ:

const אדם = {
 שֵׁם: 'ג'ון',
 תגיד שם: () => {
לְנַחֵם.עֵץ(זֶה.שֵׁם);
 }
};
const אדם אחר = {
 שֵׁם: 'ג'יין'
};
person.sayName.call (אדם אחר); // יומנים לא מוגדרים

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

זה אומר שכאשר אתה רץ person.sayName.call (אדם אחר), פונקציית החץ זֶה מילת המפתח נשארת האובייקט הגלובלי, ו לא מוגדר תופס את מקומו של ג'יין ביומן.

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

5. חזרה מרומזת

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

לדוגמא:

const כפול = (איקס) => איקס * 2;

פונקציית חץ זו מחזירה כפול מפרמטר. אתה לא צריך להשתמש במפורש לַחֲזוֹר מילת מפתח מכיוון שלגוף הפונקציה יש רק ביטוי אחד.

6. הבדלי תאימות

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

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

const להוסיף = (א, ב) => a + b;

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

פוּנקצִיָהלְהוֹסִיף(א, ב) {
לַחֲזוֹר a + b;
}

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

בחירה בין פונקציות חץ לפונקציות רגילות ב-JavaScript

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

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

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