נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

הורשת אובייקטים ב-javascript

מחבר:
בתאריך:

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

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

במדריך הנוכחי, אני רוצה ליצור אובייקט ElectrikAuto, שיהיה לו חלק מהתכונות והמתודות של האובייקט Auto. הגישה הפשוטה ביותר היא לכתוב את כל הקוד הזה מחדש, אבל זה יהיה בזבוז של זמן ומשאבים. במקום זה, תכנות מונחה עצמים מאפשר לנו להגדיר את האובייקט ElectrikAuto כאובייקט בן, שיכול לרשת את כל הקוד מההורה Auto. במונחים מקצועיים, ההורה הוא super class, והאובייקט היורש הוא sub class.

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

 

ניצור את ההורה Auto עם התכונות והמתודות שלו, כפי שכבר הסברתי.

א. ניצור את פונקציית הבנאי:

function Auto(fullTank , literPrice) {
   this.FullTank = fullTank;
   this.LiterPrice = literPrice;
}

ב. נוסיף מתודה על ידי הרחבת הפרוטוטיפ:

Auto.prototype.calcTankPrice = function() {
   return this.FullTank * this.LiterPrice;
}

נוסיף את האובייקט הבן, ElectrikAuto, שכדי שהוא יירש מ-Auto, עלינו לנקוט ב- 3 הצעדים הבאים.

א. כשניצור את פונקציית הבנאי עבור הבן היא תקרא לפונקציית הבנאי עבור האבא באמצעות המתודה call().

function ElectrikAuto(fullTank , literPrice, batteryPrice) {
   Auto.call(this, fullTank , literPrice);
   this.BatteryPrice = batteryPrice;
}

שימו לב, שהוספנו תכונה חדשה batteryPrice, שלא קיימת באבא.

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

ElectrikAuto.prototype = new Auto();

ג. צריך להגדיר את הבנאי של הבן, כדי שיצביע על הבן ולא על האבא.

ElectrikAuto.prototype.constructor = ElectrikAuto;

אחרי שסיימנו להגדיר את האובייקט ElectrikAuto, אנחנו יכולים להוסיף לו מתודות שלא קיימות בהורה, או אף לדרוס מתודות ותכונות שעברו בירושה מהאב.

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

ElectrikAuto.prototype.calcTankPrice = function() {
   return this.FullTank * this.LiterPrice * 0.5;
}

כמו כן, נוסיף את הפונקציה totalPrice, שמוסיפה לעלות הדלק המחושבת באמצעות הפונקציה calcTankPrice את עלות הסוללה.

ElectrikAuto.prototype.totalPrice = function() {
   return this.calcTankPrice() + this. BatteryPrice;
}

ניצור אינסטנסים של האובייקטים באמצעות מילת המפתח new.

var myAuto = new Auto(40, 6.9);
var myElectrikAuto = new ElectrikAuto(40, 6.9, 100);

נקרא למתודות ונראה את התוצאה:

document.writeln(myAuto.calcTankPrice());
document.writeln(myElectrikAuto.calcTankPrice());
document.writeln(myElectrikAuto.totalPrice());

והתוצאה:

276
138
238

 

הוסף תגובה חדשה

 

= 4 + 8

תמונת המגיב

אבי בתאריך: 28.10.2017

תודה רבה! אחלה מדריך

תמונת המגיב

יוסי בן הרוש בתאריך: 29.10.2017

בשמחה, אבי.