Good Day class! In our last class we went over creating cookies with JavaScript, today we’ll still be on the JavaScript track. However, this time we’re going into the realm of OOJS. To do this, we’re going to take a look at expanding a cool little project management script to properly use inheritance.
Now If you’ve been staying after class for my tutoring sessions, or just doing your homework, then you’ll already be familiar with the code we’re using today. If you haven’t been, then take a time and look at the series of links below in order and come back when your done. We’ll all wait just for you!
Done? Great! Now that your introduction to OOJS is over, let’s get to extending it a bit.
So in the Code Breakdown series we went over a JS script that outlined the foundation of a basic project management app. As anyone in project management can tell you, its ideal to break a project up into milestones for better tracking. Hmm, that sucks for us because we can’t do that with our script. Now how could we break up a project into multiple sub-projects. I got it, we’ll use inheritance!
What Is Inheritance
Well from the added information for the needs of the script, you should already have somewhat of an understanding of it. For better explaining, think of inheritance in object oriented programming as a grouping mechanism. For example, look at food. If you were to create a generic group called food you could fit any edible item that comes to your mind. However, what if you created a subgroup called fruit?
Fruit would still be able to fit into food, but not all items that can fit into the food category can fit into the fruit category. Get it? Well if you don’t, everything will feel better explained once we get to coding.
Looking Back At The Code
Now, lets take a minute and look back at the code before we do our altering.
function Project(projName,endingAmount,totalHours,days,rate){
this.projName = projName;
this.endingAmount = endingAmount;
this.totalHours = totalHours;
this.days = days;
this.rate = rate;
var hoursToday = 0,
hoursLeft,
amountLeft;
this.hoursUsed = function(hours){
hoursToday += hours;
hoursLeft = totalHours - hoursToday;
this.totalHours = hoursLeft;
console.log("You've worked " + hours + "today");
console.log("You've worked " + hoursToday + " total.");
console.log("You have " + hoursLeft + " remaining.");
}
this.hoursRemain = function(hours){
console.log(this.totalHours);
}
this.amountLeft = function(){
amountLeft = this.endingAmount - (hoursToday * this.rate);
if(amountLeft > 0){
console.log(amountLeft);
}
else{
console.log("You workd overtime for the amount of " + Math.abs(amountLeft));
}
}
}
Got a good enough look? Its pretty basic, so it should take so long. The main thing to remember is that the constructor, or parent category, we are creating is a Project. Now let’s finally get to business by starting off with our best friend in OOJS, prototype!
Our Friend Prototype
Honestly, prototype isn’t all that easy to define. A solid overview of it, in accordance with how we’re using it, is an object that will be assigned as the prototype to all instances created when this function is used as a constructor. Get it? Well if you don’t just think of it in non developer terms.
Think of cloths as a category, and all the attributes found in cloths are generic among the items in this group. Then you have a subgroup called headgear. This subgroup inherits attributes from cloths, but also has distinctive qualities that separates it from other items and subgroups. So here cloths is the prototype. Get it?
Setting Up Inheritance
Function.prototype.childOf = function(parent){
if ( parent.constructor == Function ) {
//Normal Inheritance
this.prototype = new parent;
this.prototype.constructor = this;
this.prototype.parent = parent.prototype;
}
else {
//Pure Virtual Inheritance
this.prototype = parent;
this.prototype.constructor = this;
this.prototype.parent = parent;
}
return this;
}See this code above? This is what we use to create inheritance for objects, and here is what’s going on.
- First the function is checking if the parent constructor class entered is a function
- If it is, then its setting up the inherited constructor to be a new object of its parent and passing parent’s info to it as well
- Then if its not a virtual inheritance is declared
- Virtual inheritance is when a class(constructor for JS) can’t be instantiated, but other classes can inherit from it
Code Example
// Sets up the inheritance for Project Constructor
Project.prototype = {
hoursUsed: function(hours){
this.hoursToday += this.hoursToday + hours;
this.hoursLeft = this.totalHours - this.hoursToday;
console.log("You've worked " + hours + " today");
console.log("You've worked " + this.hoursToday + " total.");
console.log("You have " + this.hoursLeft + " remaining.");
},
hoursRemain: function(){
console.log(this.totalHours);
},
amountLeft: function(){
this.amountLeft = this.endingAmount - (this.hoursToday * this.rate);
if(this.amountLeft >= 0){
console.log("You have " + this.amountLeft + " on this Project.");
}
else{
console.log("You've wokred " + Math.abs(this.amountLeft) + " overtime for this Project.");
}
},
eliminate: function(name){
for(var i = 0; i < ProjectArray.length;i++){
if(ProjectArray[i].projName == toString(name)){
delete ProjectArray[i];
ProjectArray.splice(i,1);
break;
}
}
}
}
// Declares New Class and Project Inheritence
MiniProject.childOf(Project);
function MiniProject(name, parent){
}