JavaScript proper prototypical inheritance

Question

I\'ve been spending my past couple hours researching prototypical inheritance, but I\'m left with conflicting/unclear answers on how it should be done. It seems to be wo

Answer 1

A good reference is the MDN - Inheritance revisited page

What you are looking for (I think) is something like this:

Paper.Component = function(x,y,w,h){
    this.setPosition( x, y );
    this.setSize( w, h );
}; 
Paper.Component.prototype.isInBounds  = function(x, y){};
Paper.Component.prototype.setPosition = function(x, y){};
Paper.Component.prototype.setSize     = function(w, h){};

Paper.Button = function(x, y, w, h, text){
    Paper.Component.apply( this, arguments );
}
Paper.Button.prototype = Object.create(Paper.Component.prototype);
Paper.Button.prototype.constructor = Paper.Button;

Things to note:

• Do not do Paper.Component.prototype = { ... } as it will overwrite the current prototype (e.g. the existing .prototype.constructor and anything else anyone has already created).
• Remember to set the constructor (the last line).