הנך נמצא: מדריך מתקדם / שיעור 4 / דף 6
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: JavaScript מתקדם
2: תמונת מפה
3: טעינה מוקדמת א
4: טעינה מוקדמת ב
5: הרפתקת האובייקט
6: יצירת אובייקט אישי
7: חיית מחמד וירטואלית
8: הערכת מחרוזות
9: אובייקטים קשים א
10: אובייקטים קשים ב
11: חזרה על שעור 4
|
|
|
|
|
|
|
|
|
|
|
|

שיעור 4

דף 6: יצירת אובייקט אישי.

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

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

על מנת לכתוב אובייקט משלך, עליך להתחיל עם תבנית (Template). בתכנות מונחה עצמים, התבנית נקראת בניית האובייקט (Object Constructor). לאחר שיצרת את התבנית, אתה יכול ליצור מופעים חדשים של האובייקט, כמו אלו למשל:

var fred = new Employee("Fred Flintstone", 33, "Surface Miner", 20000);
var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);
var boss = new Employee("Mr. Slate",50, "CEO", 1000000);

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

barney.promotion("Chief Slacker","10");
fred.fired();
boss.vacation(365);

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

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

function Employee(name, age, title, salary)
{
  this.name = name;
  this.age = age;
  this.title = title;
  this.salary = salary;
}

שים לב כי ההרכבה היא רק פונקציה. בתוך הפונקציה עליך להציב ערכים ל- this.property_name. איננו סתם קובעים את age להיות 0, אנו קובעים את this.age להיות 0. אותו דבר נכון גם לגבי this.name, this.title וכד'.

אפשר להעביר פרמטרים אל הבנאי, כאשר אנו מפעילים אותו ...

var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);

… ואז בפונקצית העובדים

this.name = name;

אנו קובעים את השם של עובד זה לא משנה מה העברנו אל פונקצית בנאי העובד.

הסיבה לכל הדברים "האלה" ("this") בהרכבה, נועדה על מנת לאפשר יותר מעובד אחד בכל פעם. על מנת שהמתודות שלך והמרכיבים שלך יעבדו, חייב להיות ברור עם איזה עובד אתה מתעסק כרגע. זוהי בדיוק הגדרתו של "this": מופע האובייקט הנוכחי. הצגת המתודות עשויה להבהיר את הדברים.

מתודות הן כמו פונקציות אשר מחוברות לאובייקטים. קודם כל, הגדר את הפונקציה, ואז תציב אותה לאובייקט (בתוך פונקצית ההרכבה של האובייקט). קח את מתודת ()promotion כדוגמא:

function promotion(new_title,percent_raise)
{
  var salary_increase = this.salary * percent_raise;
  this.salary = this.salary + salary_increase;
  this.title = new_title;
}

פונקציה זו מחשבת מהי משכורתו החדשה של העובד ומציבה אותה שם, יחד עם הכותרת החדשה לעובד. JavaScript יודעת על איזה עובד מדובר בעזרת השימוש ב-"this". אם אתה רושם:

barney.promotion("Chief Slacker",10);

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

הצעד האחרון בבניית אובייקט הוא לקשור את המתודה לאובייקט. כמו שציינתי קודם לכן, עושים זאת בתוך המרכיב. על מנת לקשור את מתודת הקידום לאובייקט העובד, עליך לרשום את פונקצית ()promotion, ואז להוסיף אותה לבנאי:

this.promotion=promotion;

הנה מרכיב העובד לאחר הוספת מתודת הקידום:

function Employee(name, age, title, salary)
{
  this.name = name;
  this.age = age;
  this.title = title;
  this.salary = salary;
  this.promotion = promotion;
}

function promotion(new_title,percent_raise)
{
  var salary_increase = this.salary * percent_raise;
  this.salary = this.salary + salary_increase;  
  this.title = new_title;
}

להוספת אינפורמציה, כמו, המשרד בו העובד מועסק, ניצור תכונה הנקראת "משרד". ואז, אם נרצה לרשום שינוי במיקומו של העובד, ניצור מתודה הנקראת ()tranfer.

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

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר