אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery למתקדמים » closure ב-JavaScript

closure ב-JavaScript

רן בר-זיק אפריל 29, 2012 7:18 am אין תגובות

הסבר על אחד מהמנגנונים המצוינים אך המסוכנים שיש ב-JavaScript ואיך להזהר ממנו ולמה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

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

קוד פשוט של closures
קוד פשוט של closures - לחצו להגדלה

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

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

שלוש הפונקציות מסומנות
שלוש הפונקציות מסומנות - לחצו להגדלה

אם תסתכלו היטב על שלוש הפונקציות האלו, תוכלו לראות שכל אחת מהן משתמשת במשתנים שזמינים עבור גם עבור פונקצית האם שלהן. כך למשל בתוך ה-alert, אנו יכולים לראות שימוש במשתנה intLinkIndex שקיים בפונקצית האם ובמשתנה jLinks שקיים בפונקציית הסבתא:

משתנים בפונקציות האם והסבתא
משתנים בפונקציות האם והסבתא - לחצו להגדלה

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

טוב, אז נושא הקונטקסט מובן כמעט באופן אינסטנקטיבי, במיוחד למי שכבר יצא לו לכתוב כמה וכמה סקריפטים, אז מה הקטע עם ה-closure? ה-closure מאפשר לכל המשתנים בקונטקסט להיות זמינים עבור הפונקציה, במידה וניתן לקרוא לה מבחוץ, גם לאחר שפונקצית האב סיימה לרוץ והחזירה תוצאה. מה זאת אומרת? שימו לב לקוד שלנו – פונקצית הקליק, זו שמקפיצה את האלרט – ניתנת לקריאה מרחוק, הרי זה כל היעוד שלה – כל מי שיפעיל את הקליק יקבל גישה גם אל jLinks וגם אל intLinkIndex, למרות ששתי הפונקציות שהגדירו אותן כבר סיימו לרוץ והחזירו את התוצאה שלהן. הרי הקליק נקרא אחרי שעשינו each ובוודאי אחרי שהפונקציה האנונימית שמעליה סיימה לרוץ – ועדיין לכל קליק יש גישה למשתנים הגלובליים של שתי פונקציות האם. זה אומר שכל קליק הוא closure וכן גם כל each. הנה דוגמה:

ה-closures זמינים

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

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד