I have written a draggable parent class using a module pattern:

var draggable = {}; 
var initialMouseX = undefined;
var initialMouseY = undefined; 
var startX = undefined; 
var startY = undefined; 
var draggedObject = undefined; 
var startDragX = undefined; 
var startDragY = undefined; 
var eventHandler = undefined; 
var canvas = undefined; 
var that = this; 

this.setCanvasObject = function(cnv){
 canvas = cnv; 

this.setEventHandler = function(eH){ 
eventHandler = eH; 
this.setClickable = function(element){ ... };

this.setDraggable = function(element){ ... };

this.startDragMode = function(ev){ ... };

this.dragMouse = function(ev){ .... };

this.setPosition = function(dX, dY){ ... };

this.releaseElement = function() { 


Here is my child class, using the same module pattern:

var toolbarHeader = {}; 


this.__proto__ = draggable; 

var that = this; 

this.__proto__.startDragMode = function(ev){ 

var evt = ev || window.event; 
var target = evt.target || evt.srcElement; 
target = target.parentNode; 



I want my toolbarHeader's startDragMode method to override the parent method, and inherit the rest of the parent's methods.

Is this how I should be using inheritance? Is this a good design? Please keep in mind that the module design pattern was chosen for extensibility and to avoid the hassle of namespacing and instantiation.

  • \$\begingroup\$ @200_success: why off topic, my code is not broken and most surely doesn't fit the category not written yet. \$\endgroup\$
    – Gabriel
    Apr 27, 2016 at 18:10
  • \$\begingroup\$ Based on "Currently it issues an error", it sounds like your toolbarHeader is not working as intended, and therefore off-topic. \$\endgroup\$ Apr 27, 2016 at 18:14
  • \$\begingroup\$ Ok, I will edit it to not include this error. Thank you! \$\endgroup\$
    – Gabriel
    Apr 27, 2016 at 18:24

1 Answer 1


I thought I just leave a general review if you don't mind.

MDN has this to say about __proto__:

Warning: While Object.prototype.__proto__ is supported today in most browsers, its existence and exact behavior has only been standardized in the ECMAScript 6 specification as a legacy feature to ensure compatibility for web browsers. For better support, it is recommended that only Object.getPrototypeOf() be used instead.

The names of some parameters are somewhat short.


The members of the class that they are modifiying however, have long and descriptive names:

var eventHandler 
var canvas

Classes are made to be reused. As a user of your class, I don't really care about how you name your internal variables or if they even exist. But I'd be really happy to see some readable self documenting method parameter names show up in my auto completion.

setPosition = function(dX, dY)

Imo, if I want to set the position, I'd expect the parameters to be x and y. If they start with a d I'd expect some difference in position as the behaviour of the function. The method name implies an absolute position, but the parameter names imply a relative one.

  • \$\begingroup\$ Simply...AWESOME! I'll mention you in my prayers. Thank you! \$\endgroup\$
    – Gabriel
    Apr 27, 2016 at 20:07
  • \$\begingroup\$ @Gabriel sorry for not being of greater help on the actual problem of how to do the inheritance properly. \$\endgroup\$ Apr 27, 2016 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.