How to convert javascript object variable into a class

Question

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;

this might be useful

Denys Séguret
– Denys Séguret

2013-03-29 18:09:51 +00:00
Commented Mar 29, 2013 at 18:09 — Denys Séguret
– Denys Séguret, Commented Mar 29, 2013 at 18:09
Thx, clears bit more :)

Grzegorz
– Grzegorz

2013-03-30 04:18:09 +00:00
Commented Mar 30, 2013 at 4:18 — Grzegorz
– Grzegorz, Commented Mar 30, 2013 at 4:18

Alex · Accepted Answer · 2013-03-30 04:19:46Z

3

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/

edited Mar 30, 2013 at 4:19

answered Mar 29, 2013 at 18:10

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ejaz Over a year ago

Rotator.prototype.init = function(identifierName){/***/} 2. Using object literals

Alex Over a year ago

@ejay yes, thanks for pointing out that functions in JavaScript are also objects which have a prototype property which allows for prototypal inheritance.

Grzegorz Over a year ago

oh. so you can't create a class like in PHP. You got to create function and add subfunctions.... ::sick:: So if I used this example. How do I (being in this.init function) call to the thix.Loop ? If you could extend it so init function sets value of this.Name I would be gratefull!

Grzegorz Over a year ago

No idea why. First instance is working good. When I create 2nd instance consolse says: TypeError: Rotator is not a constructor Rotator2 = new Rotator('b');

metadept · Accepted Answer · 2013-03-29 18:33:24Z

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

Collectives™ on Stack Overflow

How to convert javascript object variable into a class

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related