Dynamically creating a new javascript class from an existing object.

Question

Say I have the following code:

var album = new MyObject('album');

Assume that when the object is constructed, a bunch of properties relative to only albums are loaded via AJAX. Would it be possible to create an Album class so that at a later point, I may just do this:

var anotherAlbum = new Album();

The Album constructor would automatically set the properties that are unique to album objects, based on what was loaded when creating MyObject('album')

Answer 1

JavaScript "classes", just like any other object, can be dynamically created. So, yes, this can be done.

You would do something like this in the code handling the AJAX response (assuming that the AJAX response was providing the name of the new "class", and it's in a variable called newClassName):

window[newClassName] = function() {
  // New class name constructor code
}

window[newClassName].prototype = {

  someProperty: "someValue",

  someMethod: function(a, b) {
  },

  someOtherMethod: function(x) {
  }
}

Answer 2

This is actually the only for of inheritance that JavaScript has. JavaScript has prototypal inheritance (which can be used to recreate classical inheritance). That means that inheritance is from another object, not a class definition.

To create an object that has all the properties of another object is simple:

function Album() {
   // do whatever initialization you need to here, all the properties of album 
   // are available on 'this'
   // e.g.,
   doSomething(this.albumName);
}
Album.prototype = album;

var anotherAlbum = new Album();

Answer 3

JavaScript is prototypal, not classical, so if you think in terms of classes, you're doing it wrong.

You don't have to use the new operator at all. You can create a new object using the object literal:

var myObject = {attr1: 'val1', attr2: 'val2'};

Then you can create a new instance of that object:

var mySecondObject = Object.create(myObject);

Now you can change the attributes of mySecondObject, and if it has methods you can overload them just as easily:

mySecondObject.attr1 = "Hello";

mySecondObject.attr2 = function() {
                           return "World!";
                       };

And then mySecondObject will of course have all the properties that you gave myObject at creation.

Be aware that this is a simple version, and that this leaves all attributes 'public'. If you need some privacy, it can be achieved by adding some functions to the mix. It's a bit more complicated though, so let me know if you're interested...

Answer 4

You can use Douglas Crockford's Functional Inheritance Pattern. Code from Javascript Good Parts book

var mammal = function (spec) {
    var that = {};

    that.get_name = function (  ) {
        return spec.name;
    };

    that.says = function (  ) {
        return spec.saying || '';
    };

    return that;
};

var myMammal = mammal({name: 'Herb'});


var cat = function (spec) {
    spec.saying = spec.saying || 'meow';
    var that = mammal(spec);
    that.purr = function (n) {
        var i, s = '';
        for (i = 0; i < n; i += 1) {
            if (s) {
                s += '-';
            }
            s += 'r';
        }
        return s;
    };
    that.get_name = function (  ) {
        return that.says(  ) + ' ' + spec.name +
                ' ' + that.says(  );
    return that;
};

var myCat = cat({name: 'Henrietta'});

It uses functions to decorate existing javascript objects with new functions and properties. Like this you can add new functions and properties on the fly to your existing object