Question

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?

//============================================================================================================================================
        //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 < SOURCERECT.height){
                    var x=0;
                    cols = 0;
                    while(x < SOURCERECT.width){                            
                        cols++;
                        x += TILE_WIDTH;
                    }
                    rows++;
                    y += TILE_HEIGHT;
                }

                var i, j;
                if (direction == "tl"){
                    for (i = 0; i < rows; i++)
                        for (j = 0; j < 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 < N + M - 1; i++)
                    for (j = 0; j <= i; j++) 
                        if (j < M && (i - j) < 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 < 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 < tiles.length; i++) {
                    if (tiles[i].alpha < 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 + " > img").filter(":first").hide();

                $("<canvas/>").attr("id", "sourcecopy")
                              .css("position", "absolute")
                              .appendTo($target)
                              .hide();
                copycanvas = document.getElementById("sourcecopy");
                copy = copycanvas.getContext('2d');

                $("<canvas/>").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<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 < SOURCERECT.height){
                    var x=0;
                    while(x < 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 < 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 < tiles.length; i++) {
                    if (tiles[i].alpha < 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 + " > img").filter(":first").hide();

                $("<canvas/>").attr("id", "sourcecopy")
                              .css("position", "absolute")
                              .appendTo($target)
                              .hide();
                copycanvas = document.getElementById("sourcecopy");
                copy = copycanvas.getContext('2d');

                $("<canvas/>").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<tiles.length; i++){
                        var tile = tiles[i];
                        tile.alpha = 0 - (i * (1 / tiles.length));
                    }
                }
                else
                {
                    for(var i=tiles.length - 1; i >= 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;
            };
        };

Answer 1

You have a couple of choices. You can isolate the common functionality into a third object that Class1 and Class2 share (aggregation), or you can actually create a hierarchy of objects (inheritance). I’ll talk about inheritance here.

JavaScript doesn’t have classes, it’s a prototypical language. An object instance is “backed” by a prototype object. If you ask the instance for a property it doesn’t have (and functions are attached to objects as properties), the JavaScript interpreter checks the prototype behind the object to see if it has the property (and if not, the prototype behind that object, etc., etc.). This is how prototypical inheritance works.

JavaScript is an unusual prototypical language in that, until recently, there was no way to create an object and assign its prototype directly; you had to do it through constructor functions. If you’re using class-based terminology, you’re probably going to be more comfortable with constructor functions anyway. 🙂

Here’s a basic inheritance setup (this is not how I would actually do this, more on that below):

// Constructs an Vehicle instance
function Vehicle(owner) {
    this.owner = owner;
}

// Who's this Vehicle's owner?
Vehicle.prototype.getOwner = function() {
    return this.owner;
};

// Constructs a Car instance
function Car(owner) {
    // Call super's initialization
    Vehicle.call(this, owner);

    // Our init
    this.wheels = 4;
}

// Assign the object that will "back" all Car instances,
// then fix up the `constructor` property on it (otherwise
// `instanceof` breaks).
Car.prototype = new Vehicle();
Car.prototype.constructor = Car;

// A function that drives the car
Car.prototype.drive = function() {
};

Now we can use Car and get the features of Vehicle:

var c = new Car("T.J.");
alert(c.getOwner()); // "T.J.", retrived via Vehicle.prototype.getOwner

The above is a bit awkward and it has a couple of issues with when things happen that can be tricky. It also has the problem that most of the functions are anonymous, and I don’t like anonymous functions (function names help your tools help you). It’s also awkward to call your prototype’s version of a function if you also have a copy of it (e.g., a “supercall” — not an uncommon operation with hierarchies). For that reason, you see a lot of “frameworks” for building hierarchies, usually using class-based terminology. Here’s a list of some of them:

• The Class feature of Prootype, a general-purpose JavaScript library
• Dean Edwards’ base2
• John Resig’s Simple JavaScript Inheritance (Resig being the person who created jQuery)
• Er, um, mine — which as far as I know is being used by about three people. I did it because I had issues with decisions each of the above made. I will be updating it to not use class terminology (and actually releasing it as a tiny library, rather than just a blog post), because none of these adds classes to JavaScript, and acting as though they do misses the point of JavaScript prototypical model.

Of those four, I’d recommend Resig’s or mine. Resig’s uses function decompilation (calling toString  on function instances, which has never been standardized and doesn’t work on some platforms), but it works even if function decompilation doesn’t work, it’s just slightly less efficient in that case.

Before jumping on any of those, though, I encourage you to look at the true prototypical approach advocated by Douglas Crockford (of JSON fame, also a big wig at YUI). Crockford had a great deal of input on the latest version of ECMAScript, and some of his ideas (most notably Object.create) are now part of the latest standard and are finding their way into browsers. Using Object.create, you can directly assign a prototype to an object, without having a constructor function.

I prefer constructor functions (with my syntactic help) for places where I need inheritance, but Crockford’s approach is valid, useful, and gaining popularity. It’s something you should know about and understand, and then choose when or whether to use.