1
00:00:01,342 --> 00:00:05,959
עכשיו שאתם מבינים את היסודות של Javascript, אני רוצה ללמד אתכם דרך מגניבה להשתמש ב-Javascript

2
00:00:05,959 --> 00:00:09,546
משהו שנקרא "תכנות-מונחה-עצמים" (OOP - "object-oriented programming")

3
00:00:09,546 --> 00:00:12,570
אבל קודם אנחנו צריכים להבין למה זה שימושי

4
00:00:12,570 --> 00:00:17,668
אז יצרתי תוכנה שתהיה טובה יותר ברגע שנשתמש בתכנות מונחה עצמים

5
00:00:17,668 --> 00:00:25,138
זו תוכנית די מגניבה מלכתחילה. למעלה, יש לי שני משתנים ששומרים אובייקטים פשוטים (object literal) בתוכם

6
00:00:25,138 --> 00:00:30,448
object literal זה סוג של אובייקט שכבר למדנו עליו, שאנו יוצרים עם שימוש בסוגריים מסולסלים

7
00:00:30,448 --> 00:00:34,409
ובתוכם אנו שמים את שמות המאפיינים והערכים שלהם.

8
00:00:34,409 --> 00:00:39,241
אז יש לנו שני משתנים שהם אובייקטים, וכאן למטה יש את הפונקציה drawWinston

9
00:00:39,241 --> 00:00:41,129
שמצפה לפרמטר יחיד

10
00:00:41,129 --> 00:00:47,882
ואז הפונקציה מציירת את הפרמטר שהועבר - היא מציירת תמונה המבוססת על מאפייני ה-X וה-Y של האובייקט

11
00:00:47,882 --> 00:00:53,107
וכותרת שמבוססת על מאפייני הגיל והכינוי שלו.

12
00:00:53,107 --> 00:00:58,164
וכאן בסוף למטה, אנחנו קוראים ל-drawWinston על שני האובייקטים, teen ו-adult,

13
00:00:58,164 --> 00:01:01,012
וזה מה שגורם להדפסות להופיע.

14
00:01:01,012 --> 00:01:06,366
נחמד. אם נסתכל כאן על האובייקטים,

15
00:01:06,366 --> 00:01:11,410
שימו לב שהם ממש דומים אחד לשני.

16
00:01:11,410 --> 00:01:17,842
לשניהם יש את אותם סוגי מאפיינים, ושניהם יכולים להיות מועברים לפונקציה drawWinston

17
00:01:17,842 --> 00:01:24,072
למעשה, אם תחשבו על זה, הם שניהם מתארים סוג של ווינסטון

18
00:01:24,072 --> 00:01:28,796
נוכל לחשוב שיש מעין סוג של ווינסטון מופשט בעולם

19
00:01:28,796 --> 00:01:36,460
ולכל ווינסטון יש את אותו סט של מאפיינים, כמו כינוי וגיל, ומיקום X ו-Y

20
00:01:36,460 --> 00:01:42,162
מה שעשינו כאן, זה יצרנו שני מופעים של ווינסטון

21
00:01:42,162 --> 00:01:48,465
כך שכל אחד מתאר ווינסטון ספציפי. אחד מהם הוא ווינסטון מתבגר, והשני הוא ווינסטון בוגר.

22
00:01:48,465 --> 00:01:54,762
אבל שניהם מאוד דומים, יש להם הרבה מאפיינים דומים.

23
00:01:54,762 --> 00:02:01,295
אם תחשבו על זה, הרבה דברים בעולם עובדים בצורה כזאת, שיש לנו סוגי מידע מופשטים כמו בני אדם או אנשים

24
00:02:01,295 --> 00:02:05,958
וכולנו פשוט מופעים ספציפיים של הסוג המופשט, עם המאפיינים הייחודיים שלנו.

25
00:02:05,958 --> 00:02:14,948
אנחנו יכולים להשתמש בשיטות של תכנות מונחה עצמים ב-Javascript, כך שמשתני ווינסטון האלו

26
00:02:14,948 --> 00:02:21,834
יהיו ממש מופעים של אובייקט ווינסטון מופשט, כך שהם ידעו שיש להם מאפיינים משותפים.

27
00:02:21,834 --> 00:02:27,974
כדי לעשות זאת, דבר ראשון עלינו לתאר את הטיפוס המופשט הזה של ווינסטון

28
00:02:27,974 --> 00:02:30,900
נעשה זאת על ידי כך שניצור משתנה

29
00:02:30,900 --> 00:02:38,934
נשמור את הטיפוס הזה בתוך משתנה. נרשום: var Winston, עם אות W גדולה - נרצה תמיד להתחיל את שמות טיפוסי האובייקטים שלנו עם אות גדולה -

30
00:02:38,934 --> 00:02:42,196
ונרשום שזה שווה לפונקציה.

31
00:02:42,196 --> 00:02:47,030
הפונקציה זו היא פונקציה מיוחדת שנקראת פונקציית בנאי (constructor)

32
00:02:47,030 --> 00:02:52,042
כי זה מה שהולך להיקרא כל פעם שנרצה ליצור מופע חדש של ווינסטון.

33
00:02:52,042 --> 00:02:57,860
אז אנחנו רוצים ליצור את teenageWinston, אז נקרא לפונקציה הזו, ואם נרצה ליצור adultWinston, גם אז נקרא לפונקציה הזו.

34
00:02:57,860 --> 00:03:06,417
זה אומר שהפונקציה הזו צריכה לקבל את הפרמטרים שהיא צריכה לדעת עליהם בשביל ליצור אובייקט ווינסטון שלם

35
00:03:06,417 --> 00:03:11,324
במקרה הזה, היא צריכה לדעת כינוי, גיל, מיקום X, ומיקום Y.

36
00:03:11,324 --> 00:03:15,063
אחרי שקיבלנו את הפרמטרים האלו אנחנו צריכים לעשות איתם משהו

37
00:03:15,063 --> 00:03:21,483
אז אנחנו צריכים לחבר את המידע הזה לאובייקט של ווינסטון.

38
00:03:21,483 --> 00:03:28,672
אז נשתמש במילה חדשה בשפה - "this". המילה this מתייחסת למופע הנוכחי של האובייקט.

39
00:03:28,672 --> 00:03:34,921
אז נרשום this.nickname, כלומר מאפיין הכינוי של האובייקט הזה שווה

40
00:03:34,921 --> 00:03:38,419
למה שמעובר לפונקציית הבנאי, אוקיי?

41
00:03:38,419 --> 00:03:45,728
ו-this.age שווה לגיל שמועבר, this.x שווה ל-x שמועבר, ו-this.y

42
00:03:45,728 --> 00:03:48,385
שווה ל-y שמועבר.

43
00:03:48,385 --> 00:03:57,500
אז עכשיו יש לנו את הטיפוס המופשט שנקרא ווינסטון, ויש לו פונקציית בנאי שאנחנו יכולים להשתמש בה כדי ליצור ווינסטון חדש.

44
00:03:57,500 --> 00:04:00,327
בואו ננסה להשתמש בה!

45
00:04:00,327 --> 00:04:05,245
ניצור את winstonTeen שוב, אבל הפעם נרשום winstonTeen שווה

46
00:04:05,245 --> 00:04:10,376
ובמקום סוגריים מסולסלים נרשום new Winston

47
00:04:10,376 --> 00:04:13,950
מה שאומר שאנחנו מנסים ליצור מופע חדש של ווינסטון

48
00:04:13,950 --> 00:04:22,305
ואז נעביר את המידע שצריך - "Winsteen", 15, 20, 50, אוקיי?

49
00:04:22,305 --> 00:04:27,502
ועכשיו נוכל למחוק את הקוד הישן כי אנחנו לא צריכים אותו יותר.

50
00:04:27,502 --> 00:04:31,082
בסדר? זה יצר ווינסטון חדש בשם Winsteen.

51
00:04:31,082 --> 00:04:35,722
ונוכל לרשום גם winstonAdult = new Winston

52
00:04:35,722 --> 00:04:39,960
והכינוי שלו יהיה "Mr. Winst-a-lot"

53
00:04:39,960 --> 00:04:47,410
והוא בן 30, והמיקום שלו הוא 229, 50. בסדר? ואז נוכל למחוק את האובייקט הפשוט

54
00:04:47,410 --> 00:04:50,812
טה-דה! הקוד שלנו עדיין עובד.

55
00:04:50,812 --> 00:04:58,094
מה שעשינו כאן זה לומר שיש סוג של אובייקט מופשט, סוג של מידע, שהוא Winston

56
00:04:58,094 --> 00:05:05,272
ואנחנו יכולים ליצור מופעים חדשים של ווינסטון שיש להם מאפיינים ייחודיים להם

57
00:05:05,272 --> 00:05:08,799
אנחנו זוכרים את ערכי המאפיינים האלו בתוכם

58
00:05:08,799 --> 00:05:14,379
ולזכור זה ממש חשוב. כאן בפנים, יש לנו את this.nickname, this.age

59
00:05:14,379 --> 00:05:20,212
אם בטעות לא היינו שומרים משהו ב-this.age, עכשיו זה אומר שזה "undefined" (לא מוגדר)

60
00:05:20,212 --> 00:05:23,103
זה כי כאן למטה, הפונקציה drawWinston

61
00:05:23,103 --> 00:05:28,162
מצפה שלאובייקט שמועבר אליה יהיה מאפיין age

62
00:05:28,162 --> 00:05:30,894
ואם לא היינו יוצרים את this.age

63
00:05:30,894 --> 00:05:34,029
אז אין לו מאפיין גיל, נכון? העברנו את הגיל לפונקציית הבנאי

64
00:05:34,029 --> 00:05:39,363
אבל אז לא עשינו איתו כלום, אנחנו צריכים לחבר את הגיל לאובייקט באמצעות המילה this.

65
00:05:39,363 --> 00:05:41,444
נחזיר את השורה הזאת.

66
00:05:41,444 --> 00:05:46,361
אולי אתם חושבים, יופי, הקוד עכשיו עובד, וכתבת קוד יפה

67
00:05:46,361 --> 00:05:50,589
אבל, בסופו של דבר כל מה שעשינו זה להשיג את מה שהיה לנו קודם

68
00:05:50,589 --> 00:05:55,996
אבל הנה הדבר המגניב. כל הWinstonים שלנו עוברים דרך אותה פונקציית בנאי

69
00:05:55,996 --> 00:06:00,830
אז אם נרצה, אנחנו יכולים לשנות דברים, לשנות משהו לגבי ווינסטון

70
00:06:00,830 --> 00:06:06,059
כל הווינסטונים, עם שינוי רק פה. אז למשל גיל, אם נרצה לרשום פה "yrs old"

71
00:06:06,059 --> 00:06:12,804
נוכל פשוט לשים את זה כאן, ועכשיו בכל הווינסטונים שלנו יהיה רשום "15 yrs old" או "30 yrs old", נכון?

72
00:06:12,804 --> 00:06:17,281
אז לוקחים את החלק שמיוחד בכל אחד מהם, אבל אז יש להם גם דברים משותפים

73
00:06:17,281 --> 00:06:20,968
וזה דבר ממש מגניב לגבי תכנות מונחה עצמים, הרעיון

74
00:06:20,968 --> 00:06:26,632
שיש סוגי אובייקטים בעולם, ואפשר ליצור מופעים של האובייקטים האלו

75
00:06:26,632 --> 00:06:29,925
ושישנם דברים דומים, משותפים לכולם, כמו שלכולם יש את אותם מאפיינים

76
00:06:29,925 --> 00:06:35,528
וישנם דברים שונים - הערך של המאפיין הזה שונה מהערך של המאפיין הזה אצל המופע השני

77
00:06:35,528 --> 00:06:40,741
אנחנו יכולים לבצע עם המופעים האלו את אותם התנהגויות, לקרוא לאותם פונקציות איתם

78
00:06:40,741 --> 00:06:45,829
ולהתשמש בהם בצורה דומה. אז זה כמה מהדברים המגניבים לגבי תכנות מונחה עצמים

79
00:06:45,829 --> 00:06:48,690
אבל כפי שתראו, יש גם עוד המון אחרים.

80
00:06:48,690 --> 00:06:51,000
הישארנו עימנו!