Inheritance hierarchy design approach - Javascript [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 9 years ago.

Improve this 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..

@Bergi Is this the wrong approach in designing inheritance hierarchy? — overexchange
– overexchange, Commented Dec 8, 2015 at 3:57
Yes, it's wrong. Rat and Rodent don't inherit from each other. — Bergi
– Bergi, Commented Dec 8, 2015 at 4:02
Your first attempt seemed better, although you should not use new at all for creating prototype objects. — Bergi
– Bergi, Commented Dec 8, 2015 at 4:53
@Bergi Can you please share the code without a new keyword for prototype objects for first approach? — overexchange
– overexchange, Commented Dec 8, 2015 at 5:05

Mark McKelvy · Accepted Answer · 2015-12-07 23:05:38Z

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.

Stack Exchange Network

Inheritance hierarchy design approach - Javascript [closed]

1 Answer 1

Hot Network Questions

Inheritance hierarchy design approach - Javascript [closed]

1 Answer 1

Related

Hot Network Questions