0:00:01.342,0:00:05.959 עכשיו שאתם מבינים את היסודות של Javascript, אני רוצה ללמד אתכם דרך מגניבה להשתמש ב-Javascript 0:00:05.959,0:00:09.546 משהו שנקרא "תכנות-מונחה-עצמים" (OOP - "object-oriented programming") 0:00:09.546,0:00:12.570 אבל קודם אנחנו צריכים להבין למה זה שימושי 0:00:12.570,0:00:17.668 אז יצרתי תוכנה שתהיה טובה יותר ברגע שנשתמש בתכנות מונחה עצמים 0:00:17.668,0:00:25.138 זו תוכנית די מגניבה מלכתחילה. למעלה, יש לי שני משתנים ששומרים אובייקטים פשוטים (object literal) בתוכם 0:00:25.138,0:00:30.448 object literal זה סוג של אובייקט שכבר למדנו עליו, שאנו יוצרים עם שימוש בסוגריים מסולסלים 0:00:30.448,0:00:34.409 ובתוכם אנו שמים את שמות המאפיינים והערכים שלהם. 0:00:34.409,0:00:39.241 אז יש לנו שני משתנים שהם אובייקטים, וכאן למטה יש את הפונקציה drawWinston 0:00:39.241,0:00:41.129 שמצפה לפרמטר יחיד 0:00:41.129,0:00:47.882 ואז הפונקציה מציירת את הפרמטר שהועבר - היא מציירת תמונה המבוססת על מאפייני ה-X וה-Y של האובייקט 0:00:47.882,0:00:53.107 וכותרת שמבוססת על מאפייני הגיל והכינוי שלו. 0:00:53.107,0:00:58.164 וכאן בסוף למטה, אנחנו קוראים ל-drawWinston על שני האובייקטים, teen ו-adult, 0:00:58.164,0:01:01.012 וזה מה שגורם להדפסות להופיע. 0:01:01.012,0:01:06.366 נחמד. אם נסתכל כאן על האובייקטים, 0:01:06.366,0:01:11.410 שימו לב שהם ממש דומים אחד לשני. 0:01:11.410,0:01:17.842 לשניהם יש את אותם סוגי מאפיינים, ושניהם יכולים להיות מועברים לפונקציה drawWinston 0:01:17.842,0:01:24.072 למעשה, אם תחשבו על זה, הם שניהם מתארים סוג של ווינסטון 0:01:24.072,0:01:28.796 נוכל לחשוב שיש מעין סוג של ווינסטון מופשט בעולם 0:01:28.796,0:01:36.460 ולכל ווינסטון יש את אותו סט של מאפיינים, כמו כינוי וגיל, ומיקום X ו-Y 0:01:36.460,0:01:42.162 מה שעשינו כאן, זה יצרנו שני מופעים של ווינסטון 0:01:42.162,0:01:48.465 כך שכל אחד מתאר ווינסטון ספציפי. אחד מהם הוא ווינסטון מתבגר, והשני הוא ווינסטון בוגר. 0:01:48.465,0:01:54.762 אבל שניהם מאוד דומים, יש להם הרבה מאפיינים דומים. 0:01:54.762,0:02:01.295 אם תחשבו על זה, הרבה דברים בעולם עובדים בצורה כזאת, שיש לנו סוגי מידע מופשטים כמו בני אדם או אנשים 0:02:01.295,0:02:05.958 וכולנו פשוט מופעים ספציפיים של הסוג המופשט, עם המאפיינים הייחודיים שלנו. 0:02:05.958,0:02:14.948 אנחנו יכולים להשתמש בשיטות של תכנות מונחה עצמים ב-Javascript, כך שמשתני ווינסטון האלו 0:02:14.948,0:02:21.834 יהיו ממש מופעים של אובייקט ווינסטון מופשט, כך שהם ידעו שיש להם מאפיינים משותפים. 0:02:21.834,0:02:27.974 כדי לעשות זאת, דבר ראשון עלינו לתאר את הטיפוס המופשט הזה של ווינסטון 0:02:27.974,0:02:30.900 נעשה זאת על ידי כך שניצור משתנה 0:02:30.900,0:02:38.934 נשמור את הטיפוס הזה בתוך משתנה. נרשום: var Winston, עם אות W גדולה - נרצה תמיד להתחיל את שמות טיפוסי האובייקטים שלנו עם אות גדולה - 0:02:38.934,0:02:42.196 ונרשום שזה שווה לפונקציה. 0:02:42.196,0:02:47.030 הפונקציה זו היא פונקציה מיוחדת שנקראת פונקציית בנאי (constructor) 0:02:47.030,0:02:52.042 כי זה מה שהולך להיקרא כל פעם שנרצה ליצור מופע חדש של ווינסטון. 0:02:52.042,0:02:57.860 אז אנחנו רוצים ליצור את teenageWinston, אז נקרא לפונקציה הזו, ואם נרצה ליצור adultWinston, גם אז נקרא לפונקציה הזו. 0:02:57.860,0:03:06.417 זה אומר שהפונקציה הזו צריכה לקבל את הפרמטרים שהיא צריכה לדעת עליהם בשביל ליצור אובייקט ווינסטון שלם 0:03:06.417,0:03:11.324 במקרה הזה, היא צריכה לדעת כינוי, גיל, מיקום X, ומיקום Y. 0:03:11.324,0:03:15.063 אחרי שקיבלנו את הפרמטרים האלו אנחנו צריכים לעשות איתם משהו 0:03:15.063,0:03:21.483 אז אנחנו צריכים לחבר את המידע הזה לאובייקט של ווינסטון. 0:03:21.483,0:03:28.672 אז נשתמש במילה חדשה בשפה - "this". המילה this מתייחסת למופע הנוכחי של האובייקט. 0:03:28.672,0:03:34.921 אז נרשום this.nickname, כלומר מאפיין הכינוי של האובייקט הזה שווה 0:03:34.921,0:03:38.419 למה שמעובר לפונקציית הבנאי, אוקיי? 0:03:38.419,0:03:45.728 ו-this.age שווה לגיל שמועבר, this.x שווה ל-x שמועבר, ו-this.y 0:03:45.728,0:03:48.385 שווה ל-y שמועבר. 0:03:48.385,0:03:57.500 אז עכשיו יש לנו את הטיפוס המופשט שנקרא ווינסטון, ויש לו פונקציית בנאי שאנחנו יכולים להשתמש בה כדי ליצור ווינסטון חדש. 0:03:57.500,0:04:00.327 בואו ננסה להשתמש בה! 0:04:00.327,0:04:05.245 ניצור את winstonTeen שוב, אבל הפעם נרשום winstonTeen שווה 0:04:05.245,0:04:10.376 ובמקום סוגריים מסולסלים נרשום new Winston 0:04:10.376,0:04:13.950 מה שאומר שאנחנו מנסים ליצור מופע חדש של ווינסטון 0:04:13.950,0:04:22.305 ואז נעביר את המידע שצריך - "Winsteen", 15, 20, 50, אוקיי? 0:04:22.305,0:04:27.502 ועכשיו נוכל למחוק את הקוד הישן כי אנחנו לא צריכים אותו יותר. 0:04:27.502,0:04:31.082 בסדר? זה יצר ווינסטון חדש בשם Winsteen. 0:04:31.082,0:04:35.722 ונוכל לרשום גם winstonAdult = new Winston 0:04:35.722,0:04:39.960 והכינוי שלו יהיה "Mr. Winst-a-lot" 0:04:39.960,0:04:47.410 והוא בן 30, והמיקום שלו הוא 229, 50. בסדר? ואז נוכל למחוק את האובייקט הפשוט 0:04:47.410,0:04:50.812 טה-דה! הקוד שלנו עדיין עובד. 0:04:50.812,0:04:58.094 מה שעשינו כאן זה לומר שיש סוג של אובייקט מופשט, סוג של מידע, שהוא Winston 0:04:58.094,0:05:05.272 ואנחנו יכולים ליצור מופעים חדשים של ווינסטון שיש להם מאפיינים ייחודיים להם 0:05:05.272,0:05:08.799 אנחנו זוכרים את ערכי המאפיינים האלו בתוכם 0:05:08.799,0:05:14.379 ולזכור זה ממש חשוב. כאן בפנים, יש לנו את this.nickname, this.age 0:05:14.379,0:05:20.212 אם בטעות לא היינו שומרים משהו ב-this.age, עכשיו זה אומר שזה "undefined" (לא מוגדר) 0:05:20.212,0:05:23.103 זה כי כאן למטה, הפונקציה drawWinston 0:05:23.103,0:05:28.162 מצפה שלאובייקט שמועבר אליה יהיה מאפיין age 0:05:28.162,0:05:30.894 ואם לא היינו יוצרים את this.age 0:05:30.894,0:05:34.029 אז אין לו מאפיין גיל, נכון? העברנו את הגיל לפונקציית הבנאי 0:05:34.029,0:05:39.363 אבל אז לא עשינו איתו כלום, אנחנו צריכים לחבר את הגיל לאובייקט באמצעות המילה this. 0:05:39.363,0:05:41.444 נחזיר את השורה הזאת. 0:05:41.444,0:05:46.361 אולי אתם חושבים, יופי, הקוד עכשיו עובד, וכתבת קוד יפה 0:05:46.361,0:05:50.589 אבל, בסופו של דבר כל מה שעשינו זה להשיג את מה שהיה לנו קודם 0:05:50.589,0:05:55.996 אבל הנה הדבר המגניב. כל הWinstonים שלנו עוברים דרך אותה פונקציית בנאי 0:05:55.996,0:06:00.830 אז אם נרצה, אנחנו יכולים לשנות דברים, לשנות משהו לגבי ווינסטון 0:06:00.830,0:06:06.059 כל הווינסטונים, עם שינוי רק פה. אז למשל גיל, אם נרצה לרשום פה "yrs old" 0:06:06.059,0:06:12.804 נוכל פשוט לשים את זה כאן, ועכשיו בכל הווינסטונים שלנו יהיה רשום "15 yrs old" או "30 yrs old", נכון? 0:06:12.804,0:06:17.281 אז לוקחים את החלק שמיוחד בכל אחד מהם, אבל אז יש להם גם דברים משותפים 0:06:17.281,0:06:20.968 וזה דבר ממש מגניב לגבי תכנות מונחה עצמים, הרעיון 0:06:20.968,0:06:26.632 שיש סוגי אובייקטים בעולם, ואפשר ליצור מופעים של האובייקטים האלו 0:06:26.632,0:06:29.925 ושישנם דברים דומים, משותפים לכולם, כמו שלכולם יש את אותם מאפיינים 0:06:29.925,0:06:35.528 וישנם דברים שונים - הערך של המאפיין הזה שונה מהערך של המאפיין הזה אצל המופע השני 0:06:35.528,0:06:40.741 אנחנו יכולים לבצע עם המופעים האלו את אותם התנהגויות, לקרוא לאותם פונקציות איתם 0:06:40.741,0:06:45.829 ולהתשמש בהם בצורה דומה. אז זה כמה מהדברים המגניבים לגבי תכנות מונחה עצמים 0:06:45.829,0:06:48.690 אבל כפי שתראו, יש גם עוד המון אחרים. 0:06:48.690,0:06:51.000 הישארנו עימנו!