Inheritance hierarchy design approach - Javascript [closed]
https://softwareengineering.stackexchange.com/questions/304444
-
09-12-2020 - |
Question
For the below code, that creates inheritance hierarchy,
function Animal(){
this.name = "Animal";
// toString is a function in the main Object that every
// object inherits from
this.toString = function() {
return "My name is : " + this.name;
};
}
function Rodent(){
this.name = "Rodent";
}
function Rat(){
this.name = "Rat";
}
Rodent.prototype = new Animal();
Rat.prototype = new Rodent();
Rodent.prototype.constructor = Rodent;
Rat.prototype.constructor = Rat;
var caneRat = new Rat();
document.write(caneRat.toString() + "<br />");
a little modification is done by completely replacing Rat.prototype
with Rodent.prototype
, as a second approach, shown below,
function Animal(){
this.name = "Animal";
// toString is a function in the main Object that every
// object inherits from
this.toString = function() {
return "My name is : " + this.name;
};
}
function Rodent(){
this.name = "Rodent";
}
function Rat(){
this.name = "Rat";
}
Rodent.prototype = new Animal();
Rat.prototype = Rodent.prototype;
Rodent.prototype.constructor = Rodent;
var caneRat = new Rat();
document.write(caneRat.toString() + "<br />");
What are the advantages & disadvantages in the second approach of inheritance hierarchy design compared to first approach? Second approach is visualized as shown below..
Solution
It's generally fairly awkward and error-prone to implement "classical inheritance" in JavaScript. Instead, try working with the language and use behavior delegation:
var Animal = {
setName: function(name) {
this.name = name;
},
sayName: function() {
return 'My name is: ' + this.name;
}
};
var Rodent = Object.create(Animal);
var Rat = Object.create(Rodent);
var caneRat = Object.create(Rat);
caneRat.setName('Rat');
console.log(caneRat.sayName()); // 'My name is Rat'
You'll probably find that you can eliminate a lot of your "subclasses" with this approach.
For more detail on prototypes in JavaScript, take a look at this.
Also, try to avoid overwriting native object methods (e.g. toString
) unless you have a really good reason to do so.