OOP

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

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

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

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

בוליאני - סוג נתונים שיכול לקבל אחד משני ערכים בלבד: אמת (true) או שקר (false).

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

OOP

בשיעור זה אנו לומדים תכנות מונחה עצמים בג'אווה סקריפט. אנו בונים אובייקטים בכמה שיטות: יצירה ישירה עם new Object, בתחביר JSON, עם קונסטרקטור ועם prototype, לומדים את המילה this ולולאת for-in, ומגיעים להורשה בשתי שיטות ולאופרטורים instanceof ו-hasOwnProperty לבדיקת יחסים בין אובייקטים ומחלקות.

נושאי הסיכום המוצגים בשיעור:

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

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

3. יצירת אובייקט עם new Object: בשיטה הראשונה לא בונים קלאס אלא יוצרים אובייקט ישירות: משתנה car1 שמאותחל ב-new Object. האובייקט בהתחלה ריק ממאפיינים, ואז מוסיפים לו מאפיינים כמו מניופקטור ומודל, ואפשר להציג את הערכים שלו ולראות למבורגיני דיאבלו. ניסיון להציג מאפיין שלא הוגדר, כמו שנת ייצור, מחזיר undefined.

4. הוספת פונקציה והמילה this: בדיוק כמו שהוספנו מאפיינים לאובייקט קיים, מוסיפים גם פונקציה בשם show באמצעות inline function שמציגה את הפרטים. השאלה היא איך הפונקציה מציגה את המאפיינים, והתשובה היא המילה this, שמתייחסת לאובייקט שקרא לפונקציה. כאשר car1 קורא ל-show, ה-this באותו רגע הוא car1, וכך this.manufacturer ו-this.model מביאים את הערכים הנכונים.

5. הבעיה בשיטה זו: אין שימוש חוזר: כדי לבנות אובייקט שני צריך לשכפל את הכל מחדש ל-car2, להגדיר שוב מניופקטור, מודל ופונקציית show, וגם אפשר לטעות בהקלדות. שיטה זו אינה reusable, ולכן אינה תכנות מונחה עצמית אמיתית, שבה מגדירים את הישות פעם אחת ורק יוצרים ממנה מופעים.

6. אובייקט בתחביר JSON: אפשר להשיג את אותה תוצאה בתחביר JSON מקוצר: car1 שווה סוגריים מסולסלות עם מניופקטור נקודותיים, מודל נקודותיים ו-show נקודותיים ואז פונקציה שלמה עם this, והכל מסתיים בנקודה פסיק. מייצרים גם car2 עם פרארי ספיידר וקוראים ל-show של שניהם ומקבלים את אותן תוצאות, אך החיסרון נשאר: כל פעם מגדירים מחדש את המאפיינים והפונקציות.

7. לולאת for-in: כדי לרוץ על כל המאפיינים והפונקציות של אובייקט משתמשים בלולאת for-in, שרצה על משתנה prop בתוך האובייקט, וה-prop הופך להיות כל אחד משמות המאפיינים בתורו. כדי להגיע לערך של המאפיין משתמשים באופרטור הסוגריים המרובעים: car1 בסוגריים מרובעים עם השם של המאפיין מחזיר את הערך שלו, והלולאה עובדת על כל אובייקט ללא קשר לאופן יצירתו.

8. הקונסטרקטור: השיטה האמיתית נקראת קונסטרקטור, או בנאי. זו פונקציה רגילה שנותנים לה שם, למשל Song, שמקבלת את שם השיר, מבצע השיר ולינק לשיר, ומסוגלת לייצר אובייקטים. בתוכה מוסיפים לאובייקט אוטומטית את המאפיינים שלו בעזרת this: this.name שווה ל-name שהתקבל, this.performer, this.link ו-this.show שווה לפונקציה שמציגה את שם השיר ואת מבצעו.

9. יצירת אובייקטים מהקונסטרקטור: יוצרים אובייקט בעזרת האופרטור new: var song1 שווה new Song עם הערכים, וכך נוצר אובייקט חדש מטיפוס Song שמקבל אוטומטית את name, performer, link ו-show. כדי ליצור עוד אובייקט מספיק לכתוב שוב new Song עם הערכים החדשים בלבד, כי את המבנה הגדרנו פעם אחת, וכל אובייקט מקבל רק את הערכים השונים בין אובייקט לאובייקט.

10. הוספת מאפיין לאובייקט יחיד: אפשר להוסיף לאובייקט ספציפי מאפיין חדש שלא היה לו, למשל song1.publisher שווה חברת הפצה. המאפיין נוסף רק ל-song1, ואילו ל-song2 אין publisher כלל, וזו שיטה שמתאימה לאובייקט בודד אך לא להוספה לכל האובייקטים בבת אחת.

11. הוספה לכל האובייקטים עם prototype: כדי להוסיף מאפיין לכל האובייקטים מטיפוס Song ניגשים לקונסטרקטור Song ופונים למאפיין prototype ודרכו מוסיפים את המאפיין, למשל Song.prototype.publisher שווה null. מיד גם ל-song1 וגם ל-song2 יש publisher, כאילו הוספנו אותו בתוך הקונסטרקטור עצמו, וכל אובייקט שייווצר בעתיד מאותו טיפוס יקבל אותו. אפשר אז לתת לכל אובייקט ערך משלו.

12. בדיקת קיום לפני הוספה: נהוג לבדוק לפני ההוספה אם Song.prototype.publisher שונה מ-null, ורק אם הוא לא קיים להוסיף אותו. כך אנו יודעים שבסוף התהליך המאפיין בוודאות קיים, או שהיה קיים לפני או שהוספנו אותו עכשיו.

13. הוספת פונקציה עם prototype: גם פונקציות מוסיפים באותה שיטה. בודקים אם Song.prototype.play שווה null, ואם לא קיימת פונקציה כזאת בונים אותה: Song.prototype.play שווה פונקציה שגולשת ל-window.location עם this.link. כאשר song2 קורא ל-play, ה-this באותו רגע הוא song2 והלינק הוא הלינק שלו, והדפדפן נודד לאתר היוטיוב של השיר המתאים.

14. הוספת מאפיינים למחלקות קיימות במערכת: אפשר להוסיף מאפיינים ופונקציות גם לכל אובייקט שנוצר על ידי new ממחלקות קיימות במערכת. למשל יוצרים var d שווה new Date, ואז מוסיפים ל-Date פונקציה חדשה בשם getDateInIsraelFormat דרך Date.prototype, שמחזירה את this.getDate, היום, משורשר עם סלאש, ואז this.getMonth ועוד אחד כי החודש מתחיל מ-0, ואז this.getFullYear, וכך מקבלים תאריך בפורמט ישראלי, וכל אובייקט Date שייווצר יוכל להשתמש בה.

15. הורשה בשיטת הפונקציות: בתכנות מונחה עצמים קיימת פעילות של הורשה, שבה בונים ישות חדשה שמכילה את מה שיש בישות בסיס ועוד דברים נוספים, בלי לחזור על קוד ובלי להרוס את הישות הקודמת. בונים קונסטרקטור Person עם first name, last name ו-show. בקונסטרקטור Employee מגדירים this.inheritFrom שווה לפונקציה Person, קוראים ל-inheritFrom עם הפרמטרים, והפונקציה של Person משתילה ב-this, שהוא האובייקט הנוכחי של ה-employee, את first name, last name ו-show, ואז מוסיפים רק את ה-salary החדש.

16. הורשה רב-שלבית ודריסת פונקציות: הכלל של הורשה הוא שאפשר להוריש רק אם הישות היורשת היא גם ישות הבסיס: עובד הוא גם אדם, ולכן employee יורש מ-person, ומנהל הוא גם עובד, ולכן manager יורש מ-employee עם הפרמטרים שלו ומוסיף רק את הבונוס. הבעיה היא שכולם ירשו את אותה פונקציית show שמציגה רק שם פרטי ושם משפחה, ולכן כל מחלקה מגדירה show משלה: employee מציגה גם את המשכורת ו-manager גם את הבונוס, וההגדרה החדשה דורסת את המימוש הקודם. כך p.show מציג רק שמות, e.show מציג שמות ומשכורת ו-m.show מציג שמות, משכורת ובונוס.

17. הורשה בשיטת הפרוטוטייפ: השיטה השנייה להורשה משתמשת ב-prototype. בתוך Employee מגדירים Employee.prototype.constructor ושולחים לו first name ו-last name, ומחוץ לפונקציה קובעים Employee.prototype שווה new Person. כך הפרוטוטייפ של employee הוא person, והקונסטרקטור יפעיל את הפונקציה של person שתוסיף לאובייקט הנוכחי את המאפיינים שלה, ואז employee ממשיכה ומוסיפה salary ודורסת את show. ל-manager קובעים Manager.prototype שווה new Employee, כך שמתקבלת שרשרת שבה הפרוטוטייפ של manager הוא employee והפרוטוטייפ של employee הוא person, ומקבלים את אותן תוצאות של הצגת הפרטים.

18. בדיקת יחסי הורשה עם isPrototypeOf: בשיטת הפרוטוטייפ אפשר לדעת איזה אובייקט יורש ממי. הפונקציה Manager.prototype.isPrototypeOf מקבלת אובייקט ובודקת אם המחלקה היא אב הטיפוס שלו. Manager אינו הפרוטוטייפ של person ולכן הבדיקה מחזירה false, אבל person כן הפרוטוטייפ של manager וגם של employee, וגם של עצמו, וכל הבדיקות האלה מוצגות ומאומתות.

19. האופרטור instanceof: האופרטור instanceof, כלומר מופע של, הוא אופרטור בוליאני שבודק האם אובייקט הוא מופע של מחלקה מסוימת. p הוא מופע של person, וגם e וגם m הם מופעים של person כי person הוא אב הטיפוס שלהם, אבל p אינו מופע של employee ואינו מופע של manager, ו-e אינו מופע של manager, אך m כן מופע של employee. ההיגיון הוא שיצירת אובייקט person יוצרת אך ורק אובייקט מטיפוס person, ו-person לא מכירה את employee כלל, ואילו employee מכירה את person ו-manager מכיר את שניהם.

20. שימוש מעשי בבדיקות: את instanceof ואת isPrototypeOf משתמשים כאשר מקבלים אובייקט כלשהו ורוצים לדעת אם הוא מכיל פונקציה שאנו יודעים בוודאות שקיימת במחלקה מסוימת. למשל מגדירים ל-manager פונקציה showBonus שמציגה רק את הבונוס, ואם m הוא instanceof manager אז בטוח שאפשר לקרוא ל-m.showBonus, ואחרת לא מבצעים כלום.

21. הפונקציה hasOwnProperty: לכל אובייקט יש פונקציה בשם hasOwnProperty שמקבלת שם של מאפיין ומחזירה true אם הוא הוגדר בצורה ישירה בתוך המחלקה שיצרה את האובייקט. first name הוגדר ישירות ב-person ולכן עבור p התשובה true, אך הוא לא הוגדר ישירות ב-employee ולא ב-manager ולכן עבורם התשובה false, וגם מאפיין שלא קיים כלל מחזיר false. כך אפשר לדעת אם מאפיין מסוים קיים ישירות בתוך האובייקט ולהחליט בהתאם אם להציגו, להוסיפו או לא.

22. שימוש חוזר בקוד: כל השיטות שראינו מאפשרות שימוש חוזר בקוד, reusable: מגדירים פעם אחת את person, פעם אחת employee שיורשת ממנה, פעם אחת manager, ובאותה צורה אפשר להגדיר סטודנט, customer ו-supplier שכולם יורשים מ-person, בלי לחזור ולכתוב את הקוד שוב ושוב. מעכשיו רק בונים אובייקטים מהישויות, מאכלסים אותם בנתונים, מבצעים עליהם חישובים ושולחים אותם לשרת, וזהו תכנות מונחה עצמים בג'אווה סקריפט.

בסיום השיעור למדנו מהו עצם ומהם מאפייניו ופעולותיו, בנינו אובייקטים בארבע שיטות, הכרנו את this ואת for-in, הוספנו מאפיינים ופונקציות עם prototype גם למחלקות קיימות, ביצענו הורשה בשיטת הפונקציות ובשיטת הפרוטוטייפ, ובדקנו יחסים בין אובייקטים עם isPrototypeOf, instanceof ו-hasOwnProperty. תודה רבה, ולהתראות בשיעור הבא.

בשיעור הבא נעסוק בנושא jQuery.

מילון מושגים:

קוד מקור - הקוד שמפתחים כותבים בשפת תכנות, לפני הידור, המגדיר את פעולת התוכנה.

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: OOP

תמלול ההרצאה: OOP

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

00:01
אוקיי, אנחנו מגיעים לנושא מאוד מעניין בג'אווה סקריפט שנקרא Object Oriented Programming, תכנות מונחי עצמים. מה זה אומר?
00:12
ישנן המון שפות בעולם שנחשבות כ-Object Oriented Programming, כלומר שפה שהיא מונחית עצמים. עצם בעצם יכול להיחשב כישות מסוימת שמכילה שני דברים, מאפיינים שמאפיינים אותה ופעילויות שהיא מסוגלת לבצע.
00:30
לדוגמה, אם היינו עצם שהיינו רוצים לתאר בתוכנית לדוגמה מכונית, אז מה שהיה בעצם הזה שנקרא מכונית זה שני דברים המאפיינים לדוגמה דגם, יצרן, צבע, מספר גלגלים, משקל, נפח, מנוע, שנת ייצור, כל הדברים האלה הם מאפיינים והם נקבעים על
00:50
ידי משתנים והיה לנו פונקציות שקשורות לאותה ישות וזה אומר מה הישות יודעת לעשות. לדוגמה אם זאת הייתה מכונית משחקים אז היא הייתה יכולה לנסוע ימינה, לנסוע שמאלה, ישר, לעצור, למלאות דלק, כל הפעילויות שיש למכונית.
01:07
אז JavaScript נחשבת גם כן לשפה Object Oriented מפני שאנחנו מסוגלים לכתוב ב-JavaScript ולבנות אישויות כאלה.
01:18
אז אנחנו הולכים לראות מספר שיטות שבעזרתן אנחנו מסוגלים לבנות מעין אישויות או אובייקטים ב-JavaScript. אז בעצם המטרה שלנו בסופו של דבר זה שיהיה לנו איזשהו אובייקט בזיכרון שייצר לנו ישות ואז נוכל להגדיר ממנו הרבה הרבה אישויות כאלה.
01:35
לדוגמה אם אנחנו מתעסקים בעובדים אז אנחנו רוצים להגדיר הרבה אובייקטים שכל אובייקט מתאר עובד שיש לו שם פרטי, שם משפחה, תעודת זהות ויש לו את הדברים שהוא יודע לעשות לדוגמה להציג את הפרטים על המסך וכולי.
01:48
אז המטרה זה ליצור הרבה אובייקטים כאלה והמטרה לעשות זה כמה שיותר קל. בשפה שהיא Object Oriented טהורה יש לנו משהו שנקרא קלאס.
01:57
קלאס מאפשרת להגדיר מה קיים בתוך ישות ולאחר מכן בעזרת הקלאס אנחנו בונים את הישות עצמה שהיא אובייקט בזיכרון ונותנים לאובייקט את המאפיינים השונים בהתאם לערכים הדרושים עבור אותו אובייקט.
02:14
בואו נראה איך אנחנו עושים את זה ב-JavaScript בכמה שיטות. בשיטה הראשונה אנחנו לא הולכים ליצור קלאס משלנו אלא אנחנו ישר הולכים ליצור אובייקט.
02:23
אז בעצם אני מגדיר כאן איזשהו משתנה, קורא לו car1 ואני מתחיל אותו ב-new object. אז ב-JavaScript יש לי את הישות הזאת שנקראת object שמאפשרת לבנות כבר עכשיו אובייקט אבל אם אני מסתכל מה יש בתוך car1 ואני רואה שאין בו כלום מבחינת מאפיינים, זה הדברים הדיפולטיים שעל חלק מהם אנחנו נדבר.
02:49
אבל אני יכול עכשיו ללכת ולהוסיף לו איזשהו מאפיין, לדוגמה מניופקטור. בואו נוסיף לו יצרן, למבורגיני, וכשאני לוחץ נקודה עכשיו אני רואה שהתווסף לו מניופקטור.
03:08
עכשיו נוסיף לו מודל. ויש לנו פה מכונית שמתארת את למבורגיני דיאבלו ואנחנו רוצים להוסיף לו עכשיו גם פונקציה. אם נלחץ car1 נקודה אני אקבל כמובן את המניפקטור ואת המודל.
03:26
בואו רגע רק נציג אותם. נציג את car1 נקודה מניפקטור ונשרשר אליו את car1 נקודה מודל. בואו נריץ ונראה אם באמת הערכים האלה מוצגים לנו. בואו נסתכל, נראה שבעצם יש לנו למבורגיני דיאבלו וזה הערכים שהכנסנו לcar1.
03:53
אוקיי, אם עכשיו הייתי גם מציג משהו שלא קיים. בואו נציג לדוגמה car1.ir כלומר שנת ייצור של המכונית אין לנו שנת ייצור של המכונית בואו נרפרש ונראה שהמשתנה הזה הוא undefined כמובן כי לא הגדרתי אותו בואו ניפטר ממנו ונוסיף עכשיו פעילות עבור המחלקה הזאת יותר נכון האובייקט הזה שנקרא
04:20
car1 ואנחנו רוצים להוסיף פעילות של הצגת הפרטים פעילות זאת פונקציה בואו נקרא לה show בדיוק כמו שמקודם הוספתי מודל שלא היה קיים לי והוספנו מניופקטור שלא היה קיים לי, עכשיו אני הולך להוסיף פונקציה שלא קיימת לי.
04:36
את זה ראינו כשעבדנו על ג'ייסון, איך אנחנו מוסיפים פונקציות בצורה כזאת, והשיטה זה פשוט לרשום פונקציית inline function ולבנות אותה. בואו נעשה alert, והשאלה עכשיו זה איזה פרטים אני מציג.
04:56
עכשיו זאת שאלה מאוד מעניינת, כי מה בדיוק אני אמור להציג? אני אמור להציג מניופקטור? הרי מייפקטור שייך ל-car1, למי בדיוק אני אמור, איך אני אמור בדיוק להציג את הערכים האלה של הפונקציה?
05:11
אז מה שאנחנו צריכים לעשות, אנחנו צריכים להבין שמי שהולך לקרוא לפונקציה הזאת זה אובייקט מטיפוס car1. car1 הולך לקרוא לפונקציה. אוקיי, אז אם car1 הולך לקרוא לפונקציה הזאת, אנחנו רוצים בעצם להציג את הפרטים של car1, אבל אני לא רוצה פה לכתוב car1, אני יכול, אבל זה לא יהיה כל כך חכם.
05:42
יש לנו מילה שמתייחסת לאובייקט הנוכחי שאנחנו מדברים עליו וזה האובייקט שקורא לפונקציה הנוכחית. עכשיו אם נסתכל כאן נראה שcar1 זהו האובייקט שקיים לי בזיכרון שמפעיל את הפונקציה show ואז הפונקציה show מופעלת כרגע על ידי car1 אז יש לנו מילה שנקראת this וthis מתייחסת לאובייקט שקרא לפונקציה ובמקרה הזה זה car1.
06:15
ועכשיו אנחנו יכולים לרשום דיס נקודה וכבר אנחנו רואים שהגענו למניפקטור ודיס נקודה מביא אותנו גם למודל. זאת אומרת שאנחנו יכולים עכשיו לקרוא לכר אחד נקודה show בואו אפילו נציג כאן את הדבר הבא מניפקטור נקודותיים נשרשר אותו עם היצרן ומודל נקודותיים נשרשר אותו עם הדגם.
06:45
אוקיי בואו נריץ את זה ונראה שקריאה לפונקציית show מציגה לי את הפרטים. הנה המאניופקטור למבורגיני מודל דיאבלו אוקיי אז אנחנו בעצם היינו צריכים לכתוב די הרבה קוד בשביל לבנות אובייקט אחד אבל אם אני רוצה לבנות עוד אובייקט הרי אין לי מכונית אחת באפליקציה יש לי כל מיני מכוניות אז בשיטה
07:08
הזאת זה לא שיטה כל כך חכמה ולא תהיה לי ברירה אלא פשוט לשכפל את הכל שוב פעם לcar2 אם אני רוצה אובייקט שני ושוב פעם להגדיר מאניופקטור שוב פעם להגדיר מודל ושוב פעם להגדיר עבור car2 פונקציית show בגלל שיש לי פה דיס ולא ניגשתי לכר אחד אז אני יכול
07:30
להשאיר את הפונקציה הזאת כמו שהיא מפני שהפעם דיס יתייחס לכר 2. בואו נחליף את הערכים יש לנו פה פרארי יש לנו מודל ספיידר ואנחנו עכשיו רוצים לגשת לכר 2 נקודה show.
07:53
בואו נרפרש אז יש לנו פה את כר 1 של למבורגיני דיאבלו וכר 2 הציגנו פרארי ספיידר. בעצם הצלחנו להגדיר שני אובייקטים שונים כל פעם היינו צריכים מחדש ללכת ולכתוב אותם אם לא הייתי עושה קופי פייסט הייתי צריך לכתוב את המניפקטור בעצמי ויכלתי כמובן לטעות כאן ואז בעצם היה לי פה קצת טעויות מבחינת האובייקטים או המשתנים יותר נכון
08:25
הפרופרטיז שקיימים בתוך האובייקטים וזה לא כל כך דבר שהוא טוב לבצע ולכן השיטה הזאת שבה הגדרנו אובייקטים בצורה כזאת היא מה שנקרא לא reusable כלומר היא לא חוזרת על עצמה בצורה פשוטה הייתי צריך כל פעם לכתוב את הכל מחדש.
08:46
אז בואו נראה שיטה אחרת שבעזרתה אני יכול לכתוב אובייקטים אבל גם בשיטה השנייה שאנחנו הולכים לראות אנחנו הולכים לראות משהו שהוא דומה לזה בשיטה קצת אחרת. אז יש לנו פה Object Oriented with Json הכנתי לעצמי פה כל מיני דוגמאות ריקות שאנחנו הולכים למלא אותן.
09:07
אז בעצם Object Oriented with JSON אומר שאני יכול לבצע דברים דומים אבל אני יכול לעשות אותם בתחביר של JSON. אז בואו בעצם נראה איך אפשר לעשות את זה.
09:21
ואם הייתי רוצה לבצע את אותו הדבר פחות או יותר הייתי רוצה שיהיה לי איזשהו אובייקט מכונית שיכיל לי דגם ויצרן אבל הייתי רוצה לעשות אותו בתחביר של JSON אז הייתי צריך בעצם לבנות אובייקט car1 שווה ואז להגדיר אובייקט בתחביר מניופקטור נקודותיים ויש לנו את למבורגיני יש לנו אחר כך פסיק ואז יש לנו מודל נקודותיים
09:57
ואז יש לנו את הדגם ואם היינו רוצים גם פונקציה אז כאן הייתי יכול גם לכתוב show נקודותיים ואותו תחביר של הפונקציה פונקשן פתיחת סוגריים לסוגסלות כתיבת התוכן של הפונקציה שוב פעם עם דיס נקודה מניופקטור יש לנו שרשור של דיס נקודה מודל והאלרט ואז אני סוגר את הבנייה של כל
10:33
האובייקט עם נקודה פסיק. פה יצרתי car1 בואו ניצור car2 ניקח את אותו הדגם כמו מקודם, פרארי ספיידר car1 נקודה show car2 נקודה show בואו נבגור את הדפדפן הזה ונריץ את הדוגמה הזאתי.
11:04
ואנחנו רואים למבורגיני דיאבלו ואנחנו רואים את פרארי ספיידר בעצם הצלחנו להשיג את אותו הדבר כמו מקודם אבל בתחביר קצת יותר מקוצר אבל החיסרון של שני המקרים האלה של שימוש באובג'קט בצורה כזאת או שימוש בתחביר של ג'ייסון עבור אובג'קט אוריינטד זה שהייתי צריך כל פעם להגדיר מחדש את האובייקט ואיזה מאפיינים יש לו ואיזה פונקציות יש
11:30
לו וזה לא באמת אובג'קט אוריינטד אובג'קט אוריינטד אני אמור להגדיר את זה פעם אחת במשהו שהוא מעין קלאס או מחלקה או איזושהי קטגוריה מסוימת, ואחר כך אני לא צריך להגדיר את זה עוד פעם אלא אני רק יוצר אובייקטים, כלומר מופעים בזיכרון מהישות הזאת.
11:50
לפני שנעבור ונראה איך עושים את זה, בואו נראה איך אני יכול להציג את הפרמטרים של אובייקט. כלומר בואו נסתכל רגע על האובייקט car1. לאובייקט car1 יש לי מניופקטור ויש לי מודל ויש לי פונקציית show.
12:08
אנחנו יכולים לרוץ ולהציג את הערכים השונים. אז ישנה לולאה שנקראת for-in. for-in לולאה ב-JavaScript זה בעצם לולאה שרצה על איזשהו משתנה, בואו נקרא לזה prop, כי הוא מתאר לי פרופרטי, ובתוך איזשהו אובייקט, בואו ניקח את car1.
12:30
עכשיו הפרופרטי הזה הופך להיות כל אחד מהשמות של המאפיינים. בואו רגע נכבה את השואוים הקודמים, נסגור את הדפדפן הזה, נריץ מחדש את המופע של הדפדפן הקודם בכדי לראות את השמות של המאפיינים.
12:56
אז יש לנו פה את המניופקטור שזה שם של מאפיין ראשון ויש לנו את המודל שזה שם של מאפיין שני. ויש לנו כמובן גם את פונקציית show שזאת פונקציה שקיימת לנו.
13:09
אוקיי, אז בעצם לולאת for in מסוגלת לרוץ על הפרטים של האובייקט או המאפיינים והפונקציות שלו, הפרופרטי שרץ לי בתוך האובייקט נותן לי את השם של המאפיין.
13:24
אז איך אני יכול להגיע לערך של המאפיין? בואו נשרשר אותו עם car1 ואופרטור הסוגריים המרובעים מאפשר לי להגיע לפרופרטי בצורה כזאת. כלומר אם יש לי שם של אובייקט שנמצא לי בזיכרון, אני יכול לפתוח סוגריים מרובעים ולתת לו פה את השם של המאפיין שאני רוצה להגיע אליו וJavaScript תחזיר לי את הערך שלו.
13:53
זאת אומרת שהעלולה הזאת היא פשוט מאוד מציגה לי את הערכים השונים. אז עבור מניפקטור אני רואה שהערך שלו הוא למבורגיני, עבור car1 כמובן, עבור מודל הערך שלו זה דיאבלו ועבור פונקציית show הערך שלה וכל התחביר של הפונקציה function alert בלה בלה בלה בלה.
14:16
בעצם ככה יכולנו לרוץ על אובייקט ולהציג את כל המאפיינים, את כל מה שיש בתוכו בעצם. הדבר הזה היה עובד גם בטכניקה של ג'ייסון. בואו נכבה את שני אלה, נסגור את הדפדפן, נריץ אותו מחדש.
14:38
בעצם הטכניקה הזאת עובדת על כל אובייקט, זה לא משנה איך האובייקט נוצר, יש לי מניופקטור למבורגיני, יש לי מודל דיאבלו ויש לי פונקציית show שזה התחביר שלה במקרה הזה.