PracticU

שפת JavaScript - הסבר על this - חלק 2

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › שפת JavaScript - הסבר על this - חלק 2
מילון מושגים:
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.
משתנה - שם שמפנה למקום בזיכרון שבו נשמר ערך שיכול להשתנות במהלך ריצת התוכנית, כמו מספר, טקסט או אובייקט.
מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

שפת JavaScript - הסבר על this - חלק 2
השיעור ממשיך את הנושא של this ומראה מה קורה כשהפונקציה מופעלת מאוחר יותר דרך setTimeout. זו בעיה נפוצה, והשיעור מציג שלוש דרכים לפתור אותה.
הבעיה
1. הפעלה דרך setTimeout: הפונקציה נקראת על ידי setTimeout ולא על ידי האובייקט, ולכן this מצביע על האובייקט הגלובלי של Node.js.
2. התוצאה: השם והגיל לא נמצאים, כי האובייקט הגלובלי לא מכיל אותם.
שלוש דרכים לפתור
1. שמירה במשתנה: שומרים את this במשתנה, לפי השיעור בדרך כלל בשם that, בשלב שבו הוא עדיין נכון, ומשתמשים בו בפונקציה הפנימית. זו הדרך הישנה והנפוצה בקוד ישן.
2. bind: מצמידים לפונקציה את האובייקט שרוצים כ-this בעזרת bind.
3. פונקציית חץ: פונקציית חץ לא מגדירה this משלה, אלא לוקחת אותו מההקשר החיצוני שבו נכתבה. בדוגמה זו זה פתר את הבעיה.
הבחנה חשובה
1. פונקציה רגילה: this תלוי במי שקרא לה.
2. פונקציית חץ: this לוקח את הערך מהאזור החיצוני.
3. גבול: כשפונקציית חץ נכתבת ישירות כמאפיין של האובייקט, this לא מצביע על האובייקט, ולכן במקרה כזה הפונקציה הרגילה היא הנכונה.
עכשיו אפשר לבחור בין פונקציה רגילה לפונקציית חץ, לפי מקום השימוש ב-this.
השיעור הבא בקורס: שפת JavaScript - הסבר על JSON

פרקי ההרצאה: שפת JavaScript - הסבר על this - חלק 2

  1. 00:00

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

  2. 00:47

    הצגת פרטים אחרי השהייה בעזרת setTimeout

  3. 02:20

    למה this לא עובד בתוך setTimeout

  4. 03:22

    מי שקורא לפונקציה הוא האובייקט הגלובלי

  5. 04:17

    שמירת this במשתנה that

  6. 06:51

    שיטה שנייה: this מתוך הפונקציה החיצונית

  7. 07:49

    קביעת this בעזרת bind

תמלול ההרצאה: שפת JavaScript - הסבר על this - חלק 2

הטקסט המלא של הדקות הראשונות בהרצאה «שפת JavaScript - הסבר על this - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    אנחנו הולכים לראות משהו מאוד מעניין בנוגע לדיס. לצורך כך בואו נבנה שוב פעם את אותו חתול שהיה לנו מקודם. יש לנו פה literal object, יש לנו כאן name, מיצי, יש לנו h4 ואנחנו רוצים display, שזאת כמובן פונקציה.

  2. 00:33

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

  3. 00:56

    אני רוצה עכשיו לבצע עוד פונקציה אבל אני אקרא לה display with or after delay עוד פונקציה שבא לי לבצע לא קשורה לפונקציה הראשונה אבל היא אומרת תשמעו אני בעצם הולכת להציג את הפרטים האלה את ה name ואת הage אבל אחרי איזשהו delay של שנייה שתיים לא משנה כמה איך אנחנו עושים delay בואו נבצע set timeout ובתוך set timeout יש לנו צורך

  4. 01:34

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

  5. 01:49

    האם זה יעבוד? בואו טיפה נקטין את הגופן ונסתכל איך בדיוק הקריאה לפונקציה השנייה מתנהגת. יש לנו כאן cat.display ויש לנו cat.display after delay.

  6. 02:09

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

  7. 02:41

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

  8. 03:22

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

  9. 03:48

    אז זה אומר שעכשיו מי שבאמת קרא לפונקציה הזאת זה אותו אובייקט גלובלי של Node.js ולא cat. לכן אין לו name ואין לו age. אנחנו רוצים לפתור את הסיטואציה הזאת.

  10. 04:06

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

  11. 04:19

    שיטה ראשונה, אם אני נמצא פה, שימו לב, בשורה 8, ה-dis שאני משתמש איתו זה אכן דיס של חתול אייג׳ וניים זה הכל בסדר אם אני נמצא בשורה 10 הדיס שאני משתמש איתו הוא לא הדיס של החתול זה שאני רואה פה את כל אלה זה בגלל שוויז'ואל סטודיו מנחשת מה אולי יכול להיות לי בהתאם לשימושים קודמים של משתנים ופונקציות

  12. 04:52

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

  13. 05:15

    אז יש כל מיני שמות שנכון לקרוא למשתנה הזה שזה הייעוד שלו לשמור את הדיס בסקורפ החיצוני יותר בכדי להשתמש איתו בסקורפ הפנימי יותר והשם אחד זה self שם אחר זה me שם אחר זה ds ושם אחר זה underline ds כל אלה ושמות אמיתיים שמשתמשים איתם בשביל הקונספט הזה אבל השם הכי הכי הכי נפוץ

  14. 05:46

    זה that הרבה פעמים אתם רואים בכל מיני קודים ישנים פורומים stack overflow שפתאום עושים דבר כזה סליחה, that שווה this ואז אפשר להשתמש פה in that בצורה כזאת וזה אמור לפתור לנו את הבעיה.

  15. 06:08

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

  16. 06:38

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

  17. 06:56

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

  18. 07:10

    אבל רגע, איפה עוד אני נמצא ישירות בתוך הפונקציה? כאן בשורה 17. ואיפה עוד? פה ופה ופה. זאת אומרת אם אני נמצא כאן אני לא נמצא בתוך הסוגריים של הפונקציה אלא מחוץ לסוגריים של הפונקציה הפנימית הכוונה ולכן אני נמצא בתוך הפונקציה ישירות display after delay 2. זה דרך אגב אמור

  19. 07:39

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

  20. 07:57

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

  21. 08:31

    אלא אני נמצא ישירות

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: שפת JavaScript - הסבר על this - חלק 1

ההרצאה הבאה: שפת JavaScript - הסבר על JSON

הרצאות קשורות מקורסים אחרים

  • הסבר על this
  • מבוא ל-Javascript
  • Javascript in JavaSelenium
  • מהי שפת SQL?

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React