title: Extending a class in javascript
body: <p>I have two almost identically classes written in js. I would like to make one of them extend the other one, in order to have less code. I'm a novice in javascript and I need a little help to make this.
  I'm posting the classes here. Can anybody help?</p>
  
  <pre><code>//============================================================================================================================================
          //Class1==================================================================================================================================
          //============================================================================================================================================
          function Class1(config){
              var targetObj;
              var copycanvas = null;
              var copy = null;
              var outputcanvas = null;
              var draw = null;
              var direction = config.direction || "lr";
  
              var TILE_WIDTH = config.tileWidth || 100;
              var TILE_HEIGHT = config.tileHeight || 100;
  
              var SOURCERECT = {x:0, y:0, width:0, height:0};
              var interval;
              var tiles2 = [];
              var cols = 0;
              var rows = 0;
  
              createTiles = function(){
                  tiles = [];     
                  tiles2 = [];        
  
                  var y=0;
                  while(y &lt; SOURCERECT.height){
                      var x=0;
                      cols = 0;
                      while(x &lt; SOURCERECT.width){                            
                          cols++;
                          x += TILE_WIDTH;
                      }
                      rows++;
                      y += TILE_HEIGHT;
                  }
  
                  var i, j;
                  if (direction == "tl"){
                      for (i = 0; i &lt; rows; i++)
                          for (j = 0; j &lt; cols; j++){
                              x = j * TILE_WIDTH;
                              y = i * TILE_HEIGHT;
                              var tile = new Tile();
                              tile.imageX = x;
                              tile.imageY = y;
                              tiles2.push(tile);
                          }
                  }
                  arrangeSquares();
              };
  
              arrangeSquares = function(){
                  var i, j, k;
                  var M, N;
  
                  M = rows;
                  N = cols;
                  i = j = 0;
                  var cnt = 0;
                  for (i = 0; i &lt; N + M - 1; i++)
                      for (j = 0; j &lt;= i; j++) 
                          if (j &lt; M &amp;&amp; (i - j) &lt; N){
                              tiles.push(tiles2[j * N + (i - j)]);
                          }   
              }
  
              processFrame = function(){  
                  copycanvas.width = outputcanvas.width = targetObj.width;
                  copycanvas.height = outputcanvas.height = targetObj.height;
                  copy.drawImage(targetObj, 0, 0, targetObj.width, targetObj.height);
  
                  for(var i=0; i &lt; tiles.length; i++) {
                      var tile = tiles[i];
  
                      tile.alpha += 0.05;
  
                      var TH  = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
                      var TW  = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));                 
  
                      draw.save();
                      draw.translate(tile.imageX, tile.imageY);   
                      draw.globalAlpha = Math.max(0, tile.alpha);         
  
                      draw.drawImage(copycanvas, tile.imageX, tile.imageY, TW, TH, 0, 0, TW, TH);         
                      draw.restore();
                  }
  
                  var ok = true;
                  for (i = 0; i &lt; tiles.length; i++) {
                      if (tiles[i].alpha &lt; 1) { 
                          ok = false;
                          break;
                      }
                  }
                  if (ok)
                  {
                      clearInterval(interval);
                      showComplete();
  
                  }
              };
  
              function showComplete() {
                  $target.trigger("showComplete");
  
                  $img.show();
                  $(copycanvas).remove();
                  $(outputcanvas).remove();
                  if ($hideTarget)
                      $hideTarget.hide();
              };
  
              this.hide = function(target) {
  
              };
              var $target = null;
              var $img = null;
              var $hideTarget = null;
              this.show = function(target, hideTarget){
                  $target = $("#" + target).show();
  
                  align($target);
  
                  if (hideTarget != undefined) {
                      $target.before($hideTarget = $("#" + hideTarget).show());
                      align($hideTarget);
                  }
  
                  $img = $("#" + target + " &gt; img").filter(":first").hide();
  
                  $("&lt;canvas/&gt;").attr("id", "sourcecopy")
                                .css("position", "absolute")
                                .appendTo($target)
                                .hide();
                  copycanvas = document.getElementById("sourcecopy");
                  copy = copycanvas.getContext('2d');
  
                  $("&lt;canvas/&gt;").attr("id", "output")
                                .css("position", "absolute")
                                .appendTo($target);
                  outputcanvas = document.getElementById("output");
                  draw = outputcanvas.getContext('2d');
  
                  targetObj = document.getElementById($img.attr("id"));
  
                  clearInterval(interval);
  
                  SOURCERECT = {x:0, y:0, width: targetObj.width, height: targetObj.height};
                  createTiles();
  
                  for(var i=0; i&lt;tiles.length; i++){
                      var tile = tiles[i];
                      tile.alpha = 0 - (i * (2 / tiles.length));
                  }
  
                  var intervalDelay = (config.duration * 1000) / (40 + rows + cols);
                  interval = setInterval(function() { processFrame(); }, intervalDelay);  
              };
  
              function Tile(){
                  this.alpha = 1; 
                  this.imageX = 0;
                  this.imageY = 0;
              };
          };
  
          //============================================================================================================================================
          //Class2===================================================================================================================================
          //============================================================================================================================================
          function Class2(config){
              var targetObj;
              var copycanvas = null;
              var copy = null;
              var outputcanvas = null;
              var draw = null;
              var direction = config.direction || "lr";
  
              var TILE_WIDTH = config.barWidth || 50;
              var TILE_HEIGHT = 100;
  
              var SOURCERECT = {x:0, y:0, width:0, height:0};
              var interval;
              var tiles = [];
  
              createTiles = function(){
                  tiles = [];             
                  var y=0;
                  while(y &lt; SOURCERECT.height){
                      var x=0;
                      while(x &lt; SOURCERECT.width){
                          var tile = new Tile();
                          tile.imageX = x;
                          tile.imageY = y;
                          tiles.push(tile);
                          x += TILE_WIDTH;
                      }
                      y += TILE_HEIGHT;
                  }
              };
  
              processFrame = function(){  
                  copycanvas.width = outputcanvas.width = targetObj.width;
                  copycanvas.height = outputcanvas.height = targetObj.height;
                  copy.drawImage(targetObj, 0, 0, targetObj.width, targetObj.height);
  
                  for(var i=0; i &lt; tiles.length; i++) {
                      var tile = tiles[i];
  
                      tile.alpha += 0.05;
  
                      var TH  = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
                      var TW  = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));                 
  
                      draw.save();
                      draw.translate(tile.imageX, tile.imageY);   
                      draw.globalAlpha = Math.max(0, tile.alpha);         
                      draw.drawImage(copycanvas, tile.imageX, tile.imageY, TW, TH, 0, 0, TW, TH); 
                      draw.restore();
                  }
  
                  var ok = true;
                  for (i = 0; i &lt; tiles.length; i++) {
                      if (tiles[i].alpha &lt; 1) { 
                          ok = false;
                          break;
                      }
                  }
                  if (ok)
                  {
                      clearInterval(interval);
                      showComplete();
                  }
  
              };
  
              function showComplete() {
                  $target.trigger("showComplete");
  
                  $img.show();
                  $(copycanvas).remove();
                  $(outputcanvas).remove();
                  if ($hideTarget)
                      $hideTarget.hide();
              };
  
              this.hide = function(target) {
  
              };
              var $target = null;
              var $img = null;
              var $hideTarget = null;
              this.show = function(target, hideTarget){
                  $target = $("#" + target).show();
  
                  align($target);
  
                  if (hideTarget != undefined) {
                      $target.before($hideTarget = $("#" + hideTarget).show());
                      align($hideTarget);
                  }
                  $img = $("#" + target + " &gt; img").filter(":first").hide();
  
                  $("&lt;canvas/&gt;").attr("id", "sourcecopy")
                                .css("position", "absolute")
                                .appendTo($target)
                                .hide();
                  copycanvas = document.getElementById("sourcecopy");
                  copy = copycanvas.getContext('2d');
  
                  $("&lt;canvas/&gt;").attr("id", "output")
                                .css("position", "absolute")
                                .appendTo($target);
                  outputcanvas = document.getElementById("output");
                  draw = outputcanvas.getContext('2d');
  
                  targetObj = document.getElementById($img.attr("id"));
  
                  clearInterval(interval);
  
                  if (direction == "tb" || direction == "bt")
                  {
                      TILE_WIDTH = targetObj.width;
                      TILE_HEIGHT = config.barWidth;
                  }
                  else 
                  {
                      TILE_WIDTH = config.barWidth;
                      TILE_HEIGHT = targetObj.height;         
                  }
  
                  SOURCERECT = {x:0, y:0, width: targetObj.width, height: targetObj.height};
                  createTiles();
  
                  if (direction == "lr" || direction == "tb")
                  {
                      for(var i=0; i&lt;tiles.length; i++){
                          var tile = tiles[i];
                          tile.alpha = 0 - (i * (1 / tiles.length));
                      }
                  }
                  else
                  {
                      for(var i=tiles.length - 1; i &gt;= 0 ; i--){
                          var tile = tiles[i];
                          tile.alpha = 0 - ((tiles.length - i - 1) * (2 / tiles.length));
                      }
                  }
  
                  var intervalDelay = (config.duration * 1000) / (40 + tiles.length);
                  interval = setInterval(function() { processFrame(); }, intervalDelay);  
              };
  
              function Tile(){
                  this.alpha = 1; 
                  this.imageX = 0;
                  this.imageY = 0;
              };
          };
  </code></pre>