מהן סגירות JavaScript וכיצד כותבים אותן?

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

מהן סגירות?

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

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

מהי סביבה לקסיקלית?

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

function outer(){ 
 תן a = 10;
 console.log (y);
 פְּנִימִי();
 function inner(){
 console.log (א);
 console.log (y);
 }
}
תן y = 9;
חִיצוֹנִי();

הפלט יהיה 9, 10, 9. לפונקציה הפנימית יש גישה למשתנים של האב שלה, ה חִיצוֹנִי() פוּנקצִיָה. לפיכך, ה פְּנִימִי() הפונקציה יכולה לגשת משתנה א. ה פְּנִימִי() פונקציה יכולה גם לגשת משתנה y בגלל הרעיון של ה שרשרת היקף.

האב של הפונקציה החיצונית הוא גלובלי, והאב של ה פְּנִימִי() הפונקציה היא ה חִיצוֹנִי() פוּנקצִיָה. לפיכך, ה פְּנִימִי() לפונקציה יש גישה למשתנים של הוריה. אם תנסה לגשת למשתנה א בהיקף הגלובלי, הוא יציג שגיאה. לפיכך, אתה יכול לומר כי פְּנִימִי() הפונקציה היא מילונית בתוך חִיצוֹנִי() הפונקציה, וההורה המילוני של ה חִיצוֹנִי() הפונקציה היא גלובלית.

דוגמאות לסגירת JavaScript מוסברים

מכיוון שלמדת על הסביבה המילונית, אתה יכול בקלות לנחש את הפלט של הקוד הבא:

function a(){
 תן x = 10;
 פונקציה b(){
 console.log (x);
 }
 b();
}
א();

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

הבה נבחן דוגמה שבה קיימות שלוש פונקציות המקוננות זו בזו:

function a(){ 
 תן x = 10;
 פונקציה b(){ 
 פונקציה c(){
 function d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
א();

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

תסתכל על דוגמה מעניינת נוספת:

פונקציה x(){
 תן a = 9;
 החזר פונקציה y(){
 console.log (א); 
 }
}
תן b = x();

ניתן להחזיר פונקציה בתוך פונקציה, להקצות פונקציה למשתנה ולהעביר פונקציה בתוך a פונקציה ב-JavaScript. זה היופי של השפה. האם אתה יכול לנחש מה יהיה הפלט אם תדפיס משתנה ב? זה ידפיס פונקציה y(). הפונקציה איקס() מחזירה פונקציה y(). מכאן, המשתנה ב מאחסן פונקציה. עכשיו, אתה יכול לנחש מה יקרה אם תקרא משתנה ב? זה מדפיס את הערך של משתנה א: 9.

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

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

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

   לחץ עלי
   
   

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

   לחץ עלי
   
   

קָשׁוּר: הגיבור הנסתר של האתרים: הבנת ה-DOM

מדוע סגירות חשובות?

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

שקול את הדוגמה הזו של הרכב פונקציות:

const כפל = (א, ב) => a*b;
const multiplyBy2 = x => כפל (10, x);
console.log (multiplyBy2(9));

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

const כפל = פונקציה (א){
 החזר פונקציה (ב){
 החזר א*ב
 }
}
const multiplyBy2 = כפל (2);
console.log (multiplyBy2(10))

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

1. ליישם פונקציה קאריינג
2. לשימוש להסתרת נתונים
3. לשימוש עם מאזיני אירועים
4. לשימוש בשיטת setTimeout()

לא כדאי להשתמש בסגירות שלא לצורך

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

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

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

 פונקציה f(){
 const x = 3;
 return function inner(){
 console.log (x);
 }
 }
 f()();

ה משתנה x כאן צורך זיכרון למרות שלא נעשה בו שימוש תכוף. אספן האשפה לא יוכל לפנות את הזיכרון הזה כי הוא נמצא בתוך הסגר.

JavaScript הוא אינסופי

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

היכרות עם איטרטורים ומחוללים ב-JavaScript

קבל את ההבנה של שיטות איטרטור ומחולל ב-JS.

קרא הבא

על הסופר