הורשת אובייקטים ב-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

מדריכי JavaScript למתקדמים

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים