Draggable toolbar header class, inheriting from a draggable parent class

Question

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

var draggable = {}; 
(function(){ 
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() { 
... 
}; 

}).apply(draggable);

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

var toolbarHeader = {}; 

(function(){ 

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; 

...

}).apply(toolbarHeader);

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.

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.

function(eH)
function(ev)
function(cnv)

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.