CODEWITHSUNDEEP
javascript
Grzegorz
Grzegorz

Reputation: 3608

How to convert javascript object variable into a class

How do I define a class I can instatiate later?

I wrote myself a rotator class using jquery which looks like:

var Rotator =
{
Loop: null,

init: function(identifierName)
    {
    ........
    }
}

If i want to have one rotator on my page it's good. I just call Rotator.init() and it's ready. However when I want to have 3 rotators i got to define 3 times the whole class code changing its name.

Way easier it would be if I could just do

  Instance1 = new rotator;
  Instance2 = new rotator;
  Instance3 = new rotator;

Upvotes: 4

Views: 4193

Answers (2)

Alex
Alex

Reputation: 35407

The following is what your object literal might look like as a re-usable Named Function that can be instantiated multiple times:

var Rotator = function(name) {
    this.Name = name;
    this.Loop = null;

    this.init = function(identifierName)
    {
        this.Name = identifierName;
    };
};

// usage:

var foorotator = new Rotator('foo');
var barrotator = new Rotator('bar');

alert(foorotator.Name);
alert(barrotator.Name);

http://jsfiddle.net/JzWCL/

After Edit:

http://jsfiddle.net/mPzsq/

Upvotes: 3

metadept
metadept

Reputation: 7959

Xander's solution looks like an acceptable form for a class-like object used only once. If you plan to subclass or multiply instantiate it, however, you should apply methods to the prototype rather than defining them within the main class (constructor) function. For example:

var Rotator = function(name) {
    //run your initialization logic inside this constructor function
    this.Name = name;
    this.Loop = null;
}

Rotator.prototype.someMethod = function() {
    //method code
}

var rotator1 = new Rotator('foo');
var rotator2 = new Rotator('bar');

The reason to use this structure is to prevent the methods from being reconstructed every time the class is instantiated. By applying the methods to the prototype, they will be shared between all instances of the class.

I've found this to be a helpful reference for some basics of JavaScript class definition: 3 Ways to Define a JavaScript Class

Upvotes: 2

Related Questions