אם אתם מתכנתים ב-JavaScript כבר זמן מה, בוודאי שמעתם על... פונקציות חץ וההתנהגות המיוחדת המפורסמת של זֶהוסביר להניח גם שהראש שלך התפוצץ יותר מפעם אחת בניסיון להבין למה. זֶה דבר אחד חל על פונקציה רגילה ומשהו שונה לחלוטין על פונקציית חץ.
שליטה בשני המושגים הללו אינה רק עניין של תיאוריה: היא המפתח לכתיבה. קוד מודרני ב-JavaScript ו-Reactהבנת אופן פעולתם של מטפלי אירועים (event handlers), אופן התנהגות ההקשר בתוך מחלקות, כיצד נפתרות קריאה חוזרת אסינכרונית ב-Node.js, ומדוע דפוסים מסוימים נחשבים כיום לשיטות עבודה מומלצות.
קודם כל: סקירה מהירה של פונקציות ב-JavaScript
ב-JavaScript ניתן להכריז על פונקציות בכמה דרכים, ולכל דרך יש השלכות על אופן התנהגותן. זֶה, ב היקף וכרגע הפונקציה זמינה בקוד.
הצהרת פונקציה
הצהרת פונקציה קלאסית משתמשת במילת המפתח פונקציה ושם. פונקציות מסוג זה הן "מוגבהות" (להניף) בתחילת הסקופ שבו הם מוצהרים, מה שמאפשר קריאה לפונקציה עוד לפני הגדרתה בקובץ.
בפונקציה המוצהרת בצורה מסורתית, הערך של זֶה נקבע לפי קום הפונקציה מופעלת: אם היא נקראת כשיטה של אובייקט, אם היא משמשת עם חדש, אם הוא במצב קפדני, אם הוא עובר ל שיחה, להגיש מועמדות o לאגדוכו'. גמישות זו עוצמתית, אך היא גם מקור לשגיאות רבות בקוד מורכב.
ביטוי פונקציה
ניתן להקצות תפקיד אנונימי או בעל שם ל- משתנהבמקרה כזה, הפונקציה עצמה לא מועלה, רק הצהרת המשתנה מועלה (עם היה), אבל לא הערך שלו. עם לתת y const אי אפשר אפילו להשתמש בו לפני קו ההגדרה שלו בגלל ה- אזור מת זמני.
פונקציות אלו חולקות את אותו מודל של הדינמיקה הזו בניגוד להצהרות קלאסיות: ערכן תמיד תלוי בהקשר של הקריאה, כך שהן נשארות רגישות לאופן שבו מעבירים אותן כקריאה חוזרת או לאופן שבו משתמשים בהן בתוך מחלקות ואובייקטים.
מהן בעצם פונקציות חץ?
פונקציות החץ הוצגו עם ECMAScript 2015 (ES6) כדרך נוחה, קומפקטית ובעלת יכולת ביטוי רבה יותר להצהיר על פונקציות, במיוחד עבור קריאה חוזרת ותכנות פונקציונלי עם מתודות כמו מַפָּה, לסנן o להפחית.
התחביר הבסיסי שלו מורכב מרשימת פרמטרים, ולאחר מכן האופרטור => ואז אחד ביטוי או בלוק קודפורמט קומפקטי זה הופך את הקוד ליעיל יותר. קריא בתרחישים רבים שבהם בעבר היית צריך לכתוב פונקציות אנונימיות ארוכות וחוזרות על עצמן.
תחביר בסיסי של פונקציות חץ
פונקציות Arrow תומכות במספר וריאציות תחביר, כולן מבוססות על אותם כללים אך עם קיצורי דרך למקרים פשוטים יותר. הבנת כל צורה עוזרת לך לכתוב טוב יותר. קוד נקי יותר אני יכול לזהות במהירות מה כל קריאה חוזרת עושה.
- ללא פרמטריםסוגריים ריקים משמשים לפני החץ ובדרך כלל ביטוי אחריו.
const getMessage = () => "Hola"; - פרמטר יחידניתן להשמיט את הסוגריים מסביב לשם הפרמטר, מה שהופך את הקוד לתמציתי יותר.
const square = x => x * x; - מספר פרמטריםתמיד צריך להשתמש בסוגריים שמקיפים אותם, מופרדים בפסיקים.
const sum = (a, b) => a + b; - גוף של ביטוי יחידאם לא משתמשים בסוגריים מסולסלים, הביטוי מוחזר בצורה מסוימת. משתמע בלי צורך לכתוב לַחֲזוֹר.
- גוף רב-קויאם אתה משתמש בסוגריים, אתה חייב לכתוב לַחֲזוֹר באופן מפורש כדי להחזיר ערך, בדיוק כמו בפונקציה רגילה.
מקור נפוץ לטעויות הוא שכחה של לַחֲזוֹר כשעוברים מגרסה בת שורה אחת לגוף עם סוגריים מסולסלים כדי להוסיף יותר לוגיקה, פתאום הפונקציה מתחילה לחזור לא מוגדר ולא ברור למה.
פונקציות חץ ואובייקטים ליטרליים
אם פונקציית arrow בעלת ביטוי יחיד מחזירה אובייקט מילוליאתה צריך לעטוף את האובייקט הזה בסוגריים כדי שהמנוע לא יטעה ותחשוב שהוא תחילת בלוק הפונקציה. זוהי מלכודת תחביר קטנה שתופסת הרבה אנשים לא מוכנים.
אחרת, המפרש מפרש את המפתחות כבלוק ריק והפונקציה שלך לא תחזיר את האובייקט, אבל לא מוגדרזה גורם לשגיאות שקשה לאתר אותן בעת ניסיון לגשת למאפיינים שמעולם לא הוחזרו.
פונקציות חץ והתנהגותן
הגורם המבדיל באמת בין פונקציות חץ אינו התחביר, אלא שלהן מודל של זהבעוד שפונקציות מסורתיות כוללות הדינמיקה הזו בהתאם לשמותיהן, לפונקציות חץ יש הלקסיקון הזהכלומר, הם לוכדים את זה מהאזור שבו הם נוצרו והם משאירים אותו ללא שינוי.
משמעות הדבר היא שבתוך פונקציית חץ, זֶה אי אפשר לשנות את זה עם שיחה, להגיש מועמדות ni לאגדוזה לא תלוי אם אתה משתמש בו כפונקציה חוזרת (callback) ב-event handler או מעביר אותו לפונקציה אחרת. תמיד יהיה לו אותו ערך שהיה לו מחוץ לפונקציה בזמן ההגדרה שלו.
איך זה עובד בפונקציות רגילות?
בפונקציה המוצהרת עם פונקציה, הערך של זֶה זה תלוי בהקשר:
- אם תקרא לפונקציה כ- שיטה של אובייקט, זֶה הצבע על האובייקט הזה.
- אם תפעילו אותו ללא הקשר במצב לא קפדני, זֶה התייחסות ל אובייקט גלובלי (חלון בדפדפן, גלובלי ב-Node.js).
- אם אתה משתמש חדש, זֶה לאחר מכן זה מצביע על ה- מופע חדש שנוצר.
- אם תגיש מועמדות שיחה, להגיש מועמדות o לאגד, אתה יכול לכפות את הערך של זֶה באופן ידני לאובייקט שבחרת.
במצב קפדני, אם קוראים לפונקציה רגילה ללא אובייקט כמקלט וללא שימוש ב- שיחה או דומה, זֶה יהיה לא מוגדרזו הסיבה שבדוגמאות מודרניות רבות רואים פונקציות שמתחילות ב- 'use strict' כדי למנוע שגיאות שקטות ולאלץ התנהגות עקבית יותר.
איך זה עובד בפונקציות חץ?
במקרה של פונקציות חץ, זֶה הוא לא מחושב מחדש כאשר הוא מופעל; הוא נלקח ישירות מ אזור שבו הם הוגדרוכלומר, הם מתנהגים באופן דומה לאופן שבו משתנים נלכדים על ידי סגירה (סגירה): הם מביטים החוצה וזוכרים את הערך הזה לנצח.
יש לכך מספר השלכות חשובות מאוד על חיי היומיום שלך:
- אי אפשר להשתמש בפונקציית חץ כמו בנאי עם חדשכי אין להם משלהם זֶה וגם לא האב טיפוס המתאים.
- קריאה לפונקציית חץ עם שיחה o להגיש מועמדות לא ישנה את הערך של זֶהעם זאת, תוכל להעביר את שאר הטיעונים כרגיל.
- במתודות של אובייקטים שנוצרו כפונקציות חץ, זֶה זה לא יצביע על האובייקט, אלא על ה סביבה עליונה (לדוגמה, חלון או המודול), שזה כמעט תמיד באג.
המסקנה המרכזית היא שפונקציות חץ אידיאליות כשרוצים את הפנימי הזה זהה לזה החיצוני.אבל הם רעיון גרוע כשאתה צריך שיטת האובייקט האמיתי או כאשר אתה מתכוון ליצור משהו עם חדש.
פונקציות Arrow, מחלקות ו-React
בעולם של להגיב ושל מחלקות JavaScript באופן כללי, הטיפול ב זֶה זה נושא רגיש. רכיבי המחלקה שעברו בירושה מ... React.Component הם משתמשים בשיטות שבהן זֶה חייב להצביע באופן עקבי על מופע הרכיב על מנת לגשת זה.אביזרים y מצב זה.
עם מתודות המוגדרות באמצעות תחביר מחלקה קלאסי, הערך של זֶה זה יכול "ללכת לאיבוד" בעת העברת מתודה כקריאה חוזרת לאירוע, למשל אל onClickזו הסיבה שבמדריכים ישנים רבים תראו דפוסים כמו this.metodo.bind(this) בבנאי או ישירות ב-JSX, משהו שנחשב די מפורט בימינו.
דפוסי קישור אופייניים אלה ב-React
ברכיב כיתתי, היו מבחינה היסטורית ארבע דרכים עיקריות להבטיח ש זֶה תמיד מצביע על הרכיב כאשר הוא נקרא על ידי מטפל אירועים:
- להשתמש לאגד בשיטה לדקלם, אשר מבטיח הקשר אך יוצר פונקציה חדשה בכל רינדור.
- לעשות את ה קשירה בבנאי כדי להימנע משחזור של הפונקציה שוב ושוב, תוך שמירה על הפניה יחידה.
- הגדר את המטפל כ מאפיין מחלקה עם פונקציית חץ, תוך ניצול העובדה שפונקציות החץ לוכדות את זֶה של המקרה.
- להשתמש פונקציית חץ מוטבעת ב-JSX, העברת פונקציית arrow ישירות לתכונה onClick או המקבילה.
בפועל, האפשרות להכריז על המטפל כ מאפיין מחלקה באמצעות פונקציית חץ זה הפך לתבנית הנוחה ביותר: אתה כותב פחות קוד, אתה נמנע מהצורך לעשות לאגד ידני ו זֶה תמיד שאפו לרכיב ללא הפתעות.
פונקציות חץ ברכיבי פונקציה
עם הגעתו של רכיבים פונקציונליים וויםReact מסתמך הרבה יותר על פונקציות arrow. רוב הרכיבים המודרניים ממומשים כ-arrows. const הרכיב שלי = () => { … }זה הופך את השימוש בפונקציות חץ לטבעי ועקבי לאורך כל העץ.
בתוך רכיבים אלה, מקובל לשלב פונקציות חץ עם תכונות אחרות של ES6 כגון הרס, מילולי תבנית, אופרטורים טרנריים, התפשטות ושיטות מערך כמו מַפָּה, לסנן y להפחית, ובכך בונה תחביר אקספרסיבי מאוד אך כזה הדורש טיפול טוב בהקשר וחוסר שינוי.
זה בהקשר הגלובלי, אובייקטים ופונקציות בודדים
כדי להבין מדוע פונקציות חץ משנות את המשחק כל כך, כדאי לבחון כיצד הן מתנהגות. זֶה בהקשרים שונים של JavaScript מקוריים, הן בדפדפן והן ב-Node.js.
ב טווח גלובלי של הדפדפן, מחוץ לכל פונקציה או מודול, זֶה הצבע על האובייקט חלוןכלומר כל משתנה המוצהר עם היה ברמה גבוהה יותר, הוא תלוי על אותו אובייקט גלובלי ונגיש גם לפי שם וגם לפי שם חלוןזה נחשב נוהג רע ביישומים מורכבים עקב זיהום עולמי.
זה בתוך אובייקטים מילוליים
כאשר אתה מגדיר א אובייקט מילולי בשיטות המסורתיות, כל שיטה מקבלת זֶה שמתייחס לאובייקט עצמו בעת קריאה אליו כ- obj.method()זוהי הדרך הסטנדרטית לגשת לנכסי אחים באמצעות נכס זה ללא צורך במשתני ביניים.
הבעיה מתעוררת כאשר מחליפים את השיטות הללו ב פונקציות חץמאחר שאין לנו זה שליפונקציית arrow תלכוד את ה-`this` החיצוני, שסביר להניח שהוא ה-`this` הגלובלי או המודול. כתוצאה מכך, לא תוכלו לגשת למאפייני האובייקט בתוך המתודה באמצעות זֶה, שובר לחלוטין את הכוונה המקורית של העיצוב.
זה בתוך פונקציות חופשיות ומצב קפדני
בפונקציות מסורתיות הנקראות "unplugged", ללא אובייקט מקבל, הערך של זֶה זה תלוי אם הקוד נמצא בפנים מצב קפדני או לא. באופן דיוק, זה נופל חזרה ל... אובייקט גלובלי, בעוד שבמישור המדויק זה הופך במפורש לא מוגדרכדי למנוע פעולות מסוכנות על הסביבה הגלובלית.
התנהגות זו משתנה באופן דרסטי כאשר אתה עוטף את הקוד שלך במודולי ES, bundlers מודרניים או IIFEs, שבהם הגלובלי יכול להיות שונה או לא קשור ל זֶה בצורה הרגילה, במיוחד ב Node.js, כאשר היקף הארכיון העיקרי הוא זה של מודול ולא זו הגלובלית.
להתקשר, להגיש בקשה, לחייב את הקשר שלהם עם זה
JavaScript מציעה שלוש שיטות נפוצות על פני פונקציות קלאסיות לניהול הקשר: שיחה, להגיש מועמדות y לאגדכולם מאפשרים לך לשלוט במפורש בערך שהוא מקבל. זֶה כאשר הפונקציה מבוצעת.
שיטות אלו עובדות רק עם פונקציות מוצהרות עם פונקציה (או מקבילות), מכיוון שפונקציות arrow מתעלמות מכל ניסיון לשנות את ה-`this` שלהן. זו הסיבה ששלושתן כה שימושיות כשעובדים עם ממשקי API מדור קודם, מחלקות ישנות או תבניות שבהן רוצים לעשות שימוש חוזר באותה פונקציה על אובייקטים שונים.
קריאה והחלתה: קריאה עם זה במפורש
כך שיחה כמו להגיש מועמדות הם מבצעים את הפונקציה באופן מיידיההבדל היחיד הוא באופן שבו מעבירים את הארגומנטים. בשני המקרים, הפרמטר הראשון שמעבירים הוא האובייקט שיש להמיר. זֶה בתוך הפונקציה.
עם שיחה הטיעונים הבאים מוצגים אחד אחד, בעוד שעם להגיש מועמדות הם מציגים את עצמם כ- מערךזה מתאים מאוד למצבים שבהם כבר יש לך את רשימת הארגומנטים כאוסף ואתה רוצה להזריק אותה כפי שהיא לתוך הקריאה.
קשירה: יצירת פונקציה חדשה עם קשירה זו
השיטה לאגד זה לא מבצע את הפונקציה כרגע, אלא מייצר פונקציה חדשה עם זה קשור באופן קבוע לאובייקט שאתה מציין. זה כמו ליצור גרסה "מיוחדת" של המקור שתמיד תתנהג בהקשר הזה.
דפוס זה נפוץ מאוד בהעברת מתודות אובייקט לממשקי API שיקראו להן מאוחר יותר, למשל, כ-event callbacks, מבלי לאבד את ההקשר המקורי. לפני הפיכתן של פונקציות arrow לפופולריות, לאגד זו הייתה אחת הדרכים הנקיות ביותר להבטיח שמתודת מחלקה תמשיך להצביע על המופע הנכון.
מדוע פונקציות arrow אידיאליות עבור callbacks?
אחת הסיבות לכך שפונקציות חץ כבשו את המערכת האקולוגית של ג'אווה סקריפט היא התאמתן ל... שיחות חוזרות אסינכרוניות ותכנות פונקציונלי. כשעובדים עם ממשקי API כמו setTimeout, setInterval, מבטיח או עם לולאת האירועים של Node.js, לעתים קרובות עליך לגשת להקשר החיצוני מבלי שהוא יעוות.
לפני ES6, נעשה שימוש בטריקים כמו שמירה const self = זה o קבוע ש = זה לפני הזנת הקריאה החוזרת, כך שעדיין ניתן יהיה להפנות לאובייקט הנכון מתוך הפונקציה. פונקציות חץ הופכות זאת למיותר על ידי לכידה אוטומטית של חיצוני זה ולשמר אותו.
פונקציות חץ ולולאת אירועים ב-Node.js
En Node.js, שבו רוב הקוד המעניין סובב סביב קלט/פלט אסינכרוני (קבצים, רשת, טיימרים), השילוב של פונקציות חץ עם המודל של לולאת אירועים ותורי התקשרות חוזרת זה מפשט את החיים מאוד. בכל פעם שאתה מעביר פונקציה כמו מטפל ל fs.readFileבין אם אתם שולחים שרת HTTP או כל פעולת libuv אחרת, פונקציות arrow עוזרות לשמור על הפניות למשתנים רציפים והקשרי מודולים נקיות מהפתעות.
יתר על כן, בתורי מיקרו-משימות כמו אלה של מבטיח o process.nextTickזה מאוד נפוץ לכתוב קריאה חוזרת קצרה כמו אז o לתפוס עם תחביר חץ, תוך ניצול שניהם תשואה מרומזת כמו הלקסיקון הזה, מה שהופך את הקוד להצהרה ואקספרסיבית יותר.
מתי אסור להשתמש בפונקציות חץ?
למרות שפונקציות חץ עשויות להיראות כפתרון הקסום לכל הבעיות, ישנם תרחישים שבהם השימוש בהן הוא ישיר פרודוקטיבי ואף מייצר באגים שקשה לאתר.
אחד מהם, אולי החשוב ביותר, הם ה- מתודות של אובייקטים או מחלקות שצריכות `this` משלהןדבר נוסף הוא כאשר אתה רוצה ליצור קונסטרוקטורים או להשתמש בתבניות מונחות עצמים הנתמכות על ידי אבות טיפוס וירושה, כאשר היעדר אב טיפוס וההקשר שלו עצמו אומר שפונקציות arrow פשוט לא מתאימות.
הימנעו משימוש בפונקציות arrow כמתודות אובייקט.
אם מגדירים מתודה של אובייקט עם פונקציית חץ, ה- פנימי זה לא יתייחס לאובייקטאלא להקשר שבו הוגדר האובייקט. זה שובר את הציפיות של כל מי שקורא את הקוד ומתכוון להשתמש בו נכס זה בתוך השיטה.
הדרך המומלצת לכתיבת מתודות התלויות ב זֶה מדובר על המשך השימוש בתחביר הקלאסי באובייקטים ליטרליים או הצהרת מתודות אלו בצורה סטנדרטית במחלקות, תוך שמירת פונקציות חץ לקריאות חוזרות פנימיות שצריכות ללכוד זֶה משיטה עדיפה.
אין להשתמש בפונקציות חץ כבנאים
פונקציות החץ חסרות [[לִבנוֹת]], המנגנון הפנימי המאפשר הפעלה של פונקציה באמצעות חדשלכן, ניסיון להשתמש בהם כבונים ייצור טעות הקלדהגם להם אין משלהם. אב טיפוסלכן, לא ניתן לתלות מתודות משותפות עבור מופעים.
אם העיצוב שלך דורש מופעים לשימוש חוזר עם מאפיינים ושיטות משותפים, עליך לבחור ב שיעורים או על ידי פונקציות בנאי מסורתיות, תוך השארת פונקציות חץ עבור לוגיקה חסרת מצב או כלי עזר פונקציונליים בלבד.
קשר עם תכונות מודרניות אחרות של JavaScript
פונקציות חץ משמשות לעיתים רחוקות בנפרד; הן כמעט תמיד הולכות יד ביד עם תכונות אחרות של ECMAScript מודרני אשר משפיעים גם על האופן שבו אתם מארגנים ומבינים קוד. חלק מהדברים הקשורים ביותר הם לתת y const, את חוסר שינוי, הרס ו תחביר פריסה.
ידיעת כיצד לשלב אותם בצורה נכונה מאפשרת לך לכתוב פונקציות חץ תמציתיות מאוד אשר הופכות נתונים למתודות מערך כגון מַפָּה, לסנן y להפחיתתמיד שומר על המצב המקורי שלם, משהו קריטי בסביבות כמו React שבהן דפוס אי-השינוי הוא הנורמה.
תן, קבוע ואי-שינוי
הגעתו של לתת y const זה אפשר עבודה עם טווחי בלוקים ועם הפניות שלא מוקצות מחדש. בשילוב עם פונקציות חץ, כיום מקובל להכריז על פונקציות כ- const myFunction = () => {…}, תוך הבטחה שהמשתנה המכיל את הפונקציה לא יוחלף.
במבני נתונים כגון מערכים ואובייקטים, אי-יכולת שינוי מעודדת באמצעות שימוש ב- הקפאת אובייקטים כאשר רוצים להימנע משינויים עמוקים, ובאמצעות פעולות פריסה ושיטות טהורות כאשר צריכים ליצור עותקים שעברו שינוי במקום לשנות את המקור, משהו חשוב במיוחד בעת רינדור או מצב תלוי בזיהוי שינויים.
ליטרלי תבנית, טרנריות וקצר חשמלי
ברינדור פונקציות callback, למשל ב-JSX או בעת בניית מחרוזות HTML, כמעט בלתי נמנע לערבב פונקציות arrow עם מילולי תבנית (תיקים אחוריים) ואופרטורים כגון ה- מְשּוּלָשׁ o הערכה של קצר חשמליאופרטורים אלה מאפשרים לך לכתוב תנאים מוטבעים אקספרסיביים מאוד שמתאימים היטב לסגנון ההצהרתי של פונקציות arrow.
בתוך ליטרלים של התבנית, הביטויים ${…} הם נפתרים עם אותו טווח לקסיקלי ששולט ב-'זה' של פונקציות חץ, לכן חיוני להיות ברורים לגבי אילו משתנים ואיזה הקשר משמשים בכל אינטרפולציה כדי למנוע התנהגות דו משמעית.
פונקציות Arrow באיטרציות ובאוספים
אחד התחומים שבהם פונקציות החץ עשו את ההבדל הגדול ביותר הוא בעיבוד של מערכים ואוספיםהעברת קריאות חוזרות קצרות לשיטות כמו מַפָּה, לסנן, למצוא o להפחית זה הופך להיות קריא בהרבה עם תחביר החץ.
לדוגמה, סינון ערכים ברשימה המבוססים על קטגוריה או הפיכת תוצאות API למבני נתונים פנימיים הופכים הרבה יותר הצהרתיים, ובשילוב עם הרס קל לחלץ רק את המאפיינים הנדרשים מתוך הפרמטרים של הפונקציה.
מיפוי, סינון, צמצום וחברה
השילוב האופייני הוא בדרך כלל משהו כזה: list.filter(פריט => condition).map(פריט => transformation)שרשור מספר פונקציות חץ לתוך מתודות מערך. כל אחת מהן יורשת את ה-`this` מההקשר בו היא מוגדרת, אם כי ברוב המקרים הללו אפילו לא נעשה שימוש ב-`this`, אלא בפרמטרים מפורשים, מה שמחזק את הסגנון הפונקציונלי.
En להפחיתבמקרה זה, כאשר אתם מנהלים אקומולטור שעובר מאיטרציה לאיטרציה, פונקציות arrow מאפשרות לכם לבטא את פעולת הצמצום בצורה תמציתית מאוד, אם כי מומלץ לא להשתמש יתר על המידה בביטויים צפופים מדי אם אתם רוצים שהקוד יישאר מובן למפתחים אחרים.
יבוא, יצוא ומודולים
במערכת האקולוגית המודרנית של JavaScript, כמעט כל הקוד מאורגן ל... מודוליםאו באמצעות תחביר מקורי יבוא / יצוא או באמצעות מערכות bundling (bundling) שמתקמפלות לפורמט זה. בהקשר זה, פונקציות arrow מתאימות היטב כיחידות פונקציונליות רב פעמיות.
מקובל לראות שירותים המיוצאים כ const myUtil = (…) => {…} ולאחר מכן יובא לקבצים שונים. מכיוון שכל מודול נמצא בהיקף משלו, ה- הלקסיקון הזה ההקשר של פונקציות arrow נוטה להיות זה של המודול, שברוב כלי העזר הטהורים אפילו אינו רלוונטי, מכיוון שהן אינן זקוקות להקשר.
שיטות עבודה מומלצות עם מודולים וסקריפטים חיצוניים
בעת הגשת JavaScript בדף HTML, עדיף לטעון אותו באמצעות קבצים חיצוניים והימנעו מהטמעת בלוקים גדולים בתוך השורה. כמו כן, השתמשו בתכונה סוג="מודול" בתג הסקריפט מאפשר תחביר מודרני יבוא / יצוא ומבהיר שהקובץ מבוצע במצב קַפְּדָנִי בְּרִירַת מֶחדָל.
לגבי ביצועים, הצבת סקריפטי המודול ב- ראש עם דחה מאפשר לדפדפן להוריד ולבצע את הקוד מבלי לחסום את הרינדור של HTML, תוך שמירה על חוויית משתמש טובה. בכל התוכנית הזו, פונקציות arrow הן פשוט הדרך הטבעית ביותר להגדיר חלקים קטנים של לוגיקה לשימוש חוזר.
הוספה וטיפול ב-DOM באמצעות JavaScript מודרני
למרות שהמוקד של נושא זה הוא על הפונקציות arrow ו-`this`, אי אפשר להתעלם מתפקידו של JavaScript ב- מניפולציה של DOMשיטות כגון getElementById, שואל, הגדרת תכונה או השינוי של סגנון הם עדיין בסיסיים, אבל היום הם בדרך כלל משולבים עם callbacks של חץ כדי להגיב לאירועים ולעדכן את הממשק.
לעבוד עם מאזיני אירועים באמצעות element.addEventListener('click', e => {...}) זוהי הדרך הסטנדרטית לקשר לוגיקה עם אינטראקציות של משתמשים. במטפלים אלה, זֶה בתוך פונקציית arrow, זה לא יהיה אלמנט ה-DOM, אלא ההקשר החיצוני, כך שאם תצטרכו את ה-node, תצטרכו להשתמש בפרמטר event עצמו. יעד נוכחי o e.target, במקום להסתמך על זה כמו עם המאפיינים המוטבעים הישנים.
JavaScript סינכרוני, JavaScript אסינכרוני ו-callbacks
תחום עיקרי נוסף שבו פונקציות חץ עושות את ההבדל הוא ב- תכנות אסינכרוניJavaScript הוא בעל הליך חד-הליך, וכדי למנוע חסימת הממשק, הוא מאציל פעולות איטיות לממשקי API של דפדפן או Node, אשר לאחר מכן קוראים לקריאות החוזרות שלך כשהן מסיימות.
העברת פונקציות חץ כקריאה חוזרת אל setTimeout, מבטיחבקשות HTTP או גישות לדיסק הופכות את הקוד לקומפקטי יותר ושומרות על ההקשר ללא טריקים נוספים. בשלב של קריאות חוזרות מקוננות לקראת מבטיח ובהמשך לכיוון אסינכרון / להמתיןפונקציות חץ היו מרכיב חיוני בהפיכת זרימת הנתונים לקריאה.
בסך הכל, הבנה של איך ה- פונקציות חץ לוכדות זאת באופן לקסיקלילדעת מתי הם בעלי הברית הטובים ביותר שלך ומתי עדיף להמשיך להסתמך על פונקציות מסורתיות, יחד עם לדעת כיצד לשלב אותן עם מודולים, מתודות מערך, אי-שינוי, מחלקות ולולאת אירועים, זה מה שמאפשר לך לכתוב JavaScript ו-React מוצקים באמת; בסופו של דבר, מדובר בבחירת צורת הפונקציה הנכונה לכל הקשר, תוך ניצול היתרונות התחביריים שלה מבלי ליפול למקרים גבוליים שבהם התנהגות "זו" עלולה לגרום לתוצאות הפוכות. שתף את מדריך התכנות הזה ואת פונקציות החץ של ג'אווה סקריפט.