שפת JavaScript - הסבר על this - חלק 2
setTimeout. זו בעיה נפוצה, והשיעור מציג שלוש דרכים לפתור אותה.setTimeout ולא על ידי האובייקט, ולכן this מצביע על האובייקט הגלובלי של Node.js.that, בשלב שבו הוא עדיין נכון, ומשתמשים בו בפונקציה הפנימית. זו הדרך הישנה והנפוצה בקוד ישן.bind.פרקי ההרצאה: שפת JavaScript - הסבר על this - חלק 2
תמלול ההרצאה: שפת JavaScript - הסבר על this - חלק 2
הטקסט המלא של הדקות הראשונות בהרצאה «שפת JavaScript - הסבר על this - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו הולכים לראות משהו מאוד מעניין בנוגע לדיס. לצורך כך בואו נבנה שוב פעם את אותו חתול שהיה לנו מקודם. יש לנו פה literal object, יש לנו כאן name, מיצי, יש לנו h4 ואנחנו רוצים display, שזאת כמובן פונקציה.
הנה יש לנו פה פונקציה ואנחנו רוצים להציג קונסולוג את השם של החתול ואת האייד שלו כמובן שאנחנו מביאים את דיס לעזרה. בואו נלך לקאט נקודה דיספליי נריץ node up ונראה שהכל עובד עד כאן בסדר.
אני רוצה עכשיו לבצע עוד פונקציה אבל אני אקרא לה display with or after delay עוד פונקציה שבא לי לבצע לא קשורה לפונקציה הראשונה אבל היא אומרת תשמעו אני בעצם הולכת להציג את הפרטים האלה את ה name ואת הage אבל אחרי איזשהו delay של שנייה שתיים לא משנה כמה איך אנחנו עושים delay בואו נבצע set timeout ובתוך set timeout יש לנו צורך
בפונקציה וכעבור כמה זמן אנחנו אנחנו רוצים לקרוא לה, בואו נניח אנחנו רוצים לקרוא לה אחרי שתי שניות. בתוך הפונקציה הזאת נרשום את הקוד שלנו.
האם זה יעבוד? בואו טיפה נקטין את הגופן ונסתכל איך בדיוק הקריאה לפונקציה השנייה מתנהגת. יש לנו כאן cat.display ויש לנו cat.display after delay.
אז אנחנו בואו ננקה את המסך קודם, מריצים הנה מיצי 4 ואחרי שתי שניות זה לא עובד למה זה לא עובד מה בעצם קרה פה למה אם אני רוצה להציג כל מה שרציתי זה להציג את זה אבל רק אחרי דיליי מסוים אז פתאום זה לא עובד אז זה קטע מעניין שאנחנו צריכים לשלוט בו ולהבין לגמרי מה קרה כאן ומה שקרה כאן זה דיס זאת מילה שראינו
שמתארת את האובייקט שקרה לפונקציה ביי דיפולט וזאת נקודה בעייתית כי מי זה באמת האובייקט שקרה לפונקציה אם אני מסתכל כאן דיס נמצאת ישירות בתוך דיספלי אוקיי ישירות בתוך הפונקציה דיספלי והאובייקט שמפעיל דיספליי זה cat לכן במקרה הזה אנחנו בעצם מקבלים את מיצי 4 והכל עובד כמו שצריך אם אני מסתכל על הדיס הזה אז אני רואה שהוא לא
נמצא ישירות בתוך הפונקציה display after delay אלא הוא נמצא בתוך פונקציה האחרת ולא cat קורא לפונקציה האחרת אלא setTimeout קוראת לפונקציה האחרת. עכשיו, setTimeout זה לא אובייקט, זה פונקציה, אבל setTimeout שייכת לאיזשהו אובייקט גלובלי שאנחנו נדבר עליו בהמשך.
אז זה אומר שעכשיו מי שבאמת קרא לפונקציה הזאת זה אותו אובייקט גלובלי של Node.js ולא cat. לכן אין לו name ואין לו age. אנחנו רוצים לפתור את הסיטואציה הזאת.
אז יש כל מיני דרכים לפתור את הסיטואציה, נראה דרך ראשונה מה עשו פעם-פעם, אחר כך מה עשו בשלב יותר מאוחר, ואז מה עשו בשלב עוד יותר מאוחר. נראה את כל השיטות.
שיטה ראשונה, אם אני נמצא פה, שימו לב, בשורה 8, ה-dis שאני משתמש איתו זה אכן דיס של חתול אייג׳ וניים זה הכל בסדר אם אני נמצא בשורה 10 הדיס שאני משתמש איתו הוא לא הדיס של החתול זה שאני רואה פה את כל אלה זה בגלל שוויז'ואל סטודיו מנחשת מה אולי יכול להיות לי בהתאם לשימושים קודמים של משתנים ופונקציות
אבל זה לא הדיס של החתול זה הדיס של האובייקט הגלובלי אז אנחנו יכולים לשמור את הדיס במשתנה ואז כאן המשתנה הזה יהיה הדיס האמיתי. אנחנו לא נקרא למשתנה x והשאלה היא איך נכון לקרוא לו.
אז יש כל מיני שמות שנכון לקרוא למשתנה הזה שזה הייעוד שלו לשמור את הדיס בסקורפ החיצוני יותר בכדי להשתמש איתו בסקורפ הפנימי יותר והשם אחד זה self שם אחר זה me שם אחר זה ds ושם אחר זה underline ds כל אלה ושמות אמיתיים שמשתמשים איתם בשביל הקונספט הזה אבל השם הכי הכי הכי נפוץ
זה that הרבה פעמים אתם רואים בכל מיני קודים ישנים פורומים stack overflow שפתאום עושים דבר כזה סליחה, that שווה this ואז אפשר להשתמש פה in that בצורה כזאת וזה אמור לפתור לנו את הבעיה.
בואו רגע נריץ ונראה מיצי 4 ואחרי שתי שניות עוד פעם מיצי 4 כי שמענו את הדיס האמיתי מחוץ לפונקציה הזאת. בואו ניקח את כל זה ונשכפל, האמת נעשה כאן display 1 ונשכפל ל-דיספליי 2, דיספליי אפטר דיליי הכוונה 2, בכדי לראות את הטכניקה
השנייה שהייתה עם השנים. והטכניקה השנייה אומרת, תעיפו את הדאט הזה, לא נשתמש איתו ולכן נחזיר פה לדיס, וגם כאן לדיס, ונגיד כזה דבר, הדיס הזה זה לא הדיס שאנחנו רוצים.
איפה נמצא הדיס שאנחנו רוצים? אם אני נמצא בשורה 14 כרגע נמצא הדיסט שאנחנו רוצים, הדיסט ששייך באמת לחתול שמהווה לי את החתול כי אני נמצא ישירות בתוך הפונקציה הזאת.
אבל רגע, איפה עוד אני נמצא ישירות בתוך הפונקציה? כאן בשורה 17. ואיפה עוד? פה ופה ופה. זאת אומרת אם אני נמצא כאן אני לא נמצא בתוך הסוגריים של הפונקציה אלא מחוץ לסוגריים של הפונקציה הפנימית הכוונה ולכן אני נמצא בתוך הפונקציה ישירות display after delay 2. זה דרך אגב אמור
להיות 1, שלא נשכח. אוקיי, אז מה זה עוזר לי? פונקציה היא סוג של אובייקט ואם פונקציה היא אובייקט אז אנחנו יכולים ללחוץ נקודה אחרי הפונקציה ואז יש לנו כל מיני פעילויות.
אחת מהפעילויות היא ביינד. mind אומרת לנו תשמעו אני פונקציה אבל בואו תגידו לי מה הדיס האמיתי שאתם רוצים שיעבוד בתוך הפונקציה שלי. אז אנחנו יכולים פה לשלוח את הדיס האמיתי ושימו לב שכשאני כותב פה דיס אני לא נמצא בתוך הסוגריים הפנימיות של הפונקציה הפנימית שמי שקורא לה זה הסט טיים אאוט
אלא אני נמצא ישירות