mercredi 27 avril 2016

How to extend a class/prototype in Javascript

Okay, so I have the module pattern of my main class as follows:

    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);

This is my parent or prototype class using my flavour of the module design pattern.

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;
             that.startDrag(target);
             initialMouseX = evt.clientX;
             initialMouseY = evt.clientY;

             eventHandler.addEventSimple(document,'mousemove', that.dragMouse);
             eventHandler.addEventSimple(document,'mouseup', that.releaseElement);                    
         };


 }).apply(toolbarHeader);

What i want to do is my toolbarHeader class to overwrite the parent method and in rest use the parents methods as they are.

Currently it issues an error because it cannot find that.releaseElement, that.startDrag and that.dragMouse.

What am i doing wrong? Is this how i should be using inheritance? Is this a good design?

Aucun commentaire:

Enregistrer un commentaire