CODEWITHSUNDEEP
javascript
thesonglessbird
thesonglessbird

Reputation: 570

Updating an object's definition in javascript

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...

Upvotes: 2

Views: 80

Answers (4)

James
James

Reputation: 22246

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);
}

Upvotes: 1

Will
Will

Reputation: 20245

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
}

Upvotes: 0

Sean Thoman
Sean Thoman

Reputation: 7499

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.

Upvotes: 0

cwallenpoole
cwallenpoole

Reputation: 82088

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.

Upvotes: 5

Related Questions