Updating an object's definition in javascript

Question

I'm fairly new to object orientated stuff so this may very well be the wrong way to be going about getting this done.

This is a very slimmed down version of what I currently have, but the concept is essentially the same. When the user clicks on a canvas element on my page, I create 20 instances of the particle object below, append them to an array whilst at the same time updating the canvas at 30FPS and drawing circles based on the x property of the instances of each object. Once a particle is off the screen, it's removed from the array.

var particle = function()
{
    var _this = this;
    this.velocity = 1;
    this.x = 0; 

    this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    var updateObject = function()
    {
        _this.x += velocity;
    }

}

I would like the user to be able to control the velocity of new particles that are created using an input element on the page. When this is updated I have an event listener call

particle.updateVelocity(whateverTheUserEntered);

However I get the error "particle has no method updateVelocity". After a bit of reading up on the subject I understand that to call that function I need to create an instance of the object, but this will only update the velocity value of that instance which isn't going to work for me.

My question is, is there a way to achieve what I'm doing or have I approached this in completely the wrong way? As I said, I'm still getting to grips with OOP principles so I may have just answered my own question...

Are your calling it on an instance of particle? p=new Particle(); p.updateVelocity(whateverTheUserEntered); ? — Alex K.
– Alex K., Commented Jun 29, 2011 at 16:58

cwallenpoole · Accepted Answer · 2011-06-29 16:58:29Z

5

Try this:

var particle = new (function()
{
    var _this = this;
    this.velocity = 1;
    this.x = 0; 

    this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    var updateObject = function()
    {
        _this.x += velocity;
    }

})();

Your's is creating a function and then setting the variable particle to that value. particle will not have any special properties because of this. My example above, however, by using new and the function as a constructor assigns particle an instance of a (now anonymous) class.

answered Jun 29, 2011 at 16:58

cwallenpoole

82.4k26 gold badges132 silver badges174 bronze badges

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

2 Comments

thesonglessbird Over a year ago

I've tried this, but now I get "object is not a function" when creating a new instance...

cwallenpoole Over a year ago

Ok. Here's the deal. If you want particle to be an instance of that class, you need to use what I suggested above. If you want it to be the class definition, you'll need to call updateVelocity on an instance of the class: var particleInst = new particle(); particle.updateVelocity.

James · Accepted Answer · 2011-06-29 17:57:51Z

1

I think what you want is:

// define a particle "class"
function Particle() {
    var _this = {};

    _this.velocity = 1;
    _this.x = 0; 
    _this.multiplier = 1;

    _this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    _this.updateObject = function()
    {
        _this.x += velocity;
    }

    return _this;
}

// make 1 particle
var myParticle = new Particle();
myParticle.updateVelocity(100);

// make a bunch of particles
var myParticles = [];
for (var i=0; i < 100; i++) {
  var p = new Particle();
  p.updateVelocity(Math.random * 100);
  myParticles.push(p);
}

answered Jun 29, 2011 at 17:57

James

22.4k5 gold badges29 silver badges44 bronze badges

1 Comment

thesonglessbird Over a year ago

This approach works, but with the number of particles I'm generating and the number of variables I'm using it's quite inefficient...

Sean Thoman · Accepted Answer · 2011-06-29 16:59:37Z

0

If you change it to

  var particle = new function () {

  }

The 'new' will cause creation of an instance.

So create a function that builds new particle instances for you.

answered Jun 29, 2011 at 16:59

Sean Thoman

7,5097 gold badges60 silver badges103 bronze badges

Comments

Will · Accepted Answer · 2011-06-29 17:04:40Z

0

Make velocity static and have a static method to update it. This way, you can still make instances of particle and update the velocity for all of them.

var particle = function() {
  // particle stuff
}
particle.velocity = 1;
particle.updateVelocity = function(newVelocity) {
  this.velocity = newVelocity
}

answered Jun 29, 2011 at 17:04

Will

20.3k7 gold badges49 silver badges48 bronze badges

Collectives™ on Stack Overflow

Updating an object's definition in javascript

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related