javascript better way to create object with a method using function

Question

I'm new to javascript and am trying to create an object that I can then fill a list with instances of. This code I have works, but it feels redundant to have the "this." keyword on every line. Is there a neater/more appropriate way to create an object like this?

Here is my current object:

    var Particle = function(x, y) {
    this.x = x;
    this.y = y;
    this.xspeed = 0;
    this.yspeed = 0;
    this.xacc = 0;
    this.yacc = 0;

    this.update = function() {
        this.x += this.xspeed;
        this.y += this.yspeed;
        this.xspeed += this.xacc;
        this.yspeed += this.yacc;
    }
}

Thanks for your assistance in advance

Benjamin Caure · Accepted Answer · 2019-03-20 15:39:53Z

1

Unfortunately this is mandatory in Javascript, even if the other languages deduce it.

Today Ecmascript classes are supported by any browser excepting IE. It could be a good way to use class syntax if you want to use object oriented programming.

class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.xspeed = 0;
      this.yspeed = 0;
      this.xacc = 0;
      this.yacc = 0;
    }

    update() {
        this.x += this.xspeed;
        this.y += this.yspeed;
        this.xspeed += this.xacc;
        this.yspeed += this.yacc;
    }
}

const particle = new Particle(1, 2);
particle.update();
console.log(particle);

answered Mar 20, 2019 at 15:39

Benjamin Caure

2,45324 silver badges30 bronze badges

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

1 Comment

Adam S Over a year ago

While I'm a bit sad that this. is mandatory, I didn't realise that classes were available for use like this, its pretty much exactly what I was trying to emulate. So thanks for the response Benjamin!

Jonas Wilms · Accepted Answer · 2019-03-20 15:21:01Z

1

You could use Object.assign and an object literal:

var Particle = function(x, y) {
 Object.assign(this, {
   x, y,
   xspeed: 0,
   yspeed: 0,
   xacc: 0,
   yacc:0,
 });
 //...
};

As you aren't using inheritance, you could also just return a new object:

const Particle = (x, y) => ({
   x, y,
   xspeed: 0,
   yspeed: 0,
   xacc: 0,
   yacc:0,
   update() {
    this.x += this.xspeed;
    this.y += this.yspeed;
    this.xspeed += this.xacc;
    this.yspeed += this.yacc;
  },
});

edited Mar 20, 2019 at 15:21

answered Mar 20, 2019 at 15:01

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

4 Comments

Adam S Over a year ago

This does seem cleaner, but another comment from Tino said my current method makes sense given I want to use multiple instances with their own values. Does this mean there are differences in how the variables are assigned to the object for each of these methods? Thanks

Jonas Wilms Over a year ago

@adam no there aren't, not sure what he is talking about.

Adam S Over a year ago

ok cool thanks, is there a way to create this kind of object with a constructor without using the function() declaration? because using the standard assignment of object = {} seems much cleaner but it doesn't seem to support constructors.

Adam S Over a year ago

that's great I much prefer that over the function method, thanks so much for your help Jonas.

Tino T. · Accepted Answer · 2019-03-20 15:18:55Z

0

About the high usage of this you could use Object.assign to fix the high use of value assignment in the base code. (this.value = value)

since you want multiple instances with their own values it is logical to use the this scope for the values you want to use. (using the values defined in the this scope)

edited Mar 20, 2019 at 15:18

answered Mar 20, 2019 at 15:04

Tino T.

261 silver badge5 bronze badges

2 Comments

Adam S Over a year ago

thanks for the response, I left a comment on Jonas' answer asking about the differences between my method and the object.assign method, are there any?

Tino T. Over a year ago

The Object.assign function will bind values to the this scope, there is no difference in outcome, the Object.assign is cleaner and you should go for that. I meant to say that you using the this scope in this context is not a bad thing. @Jonas 's answer is great. Just read my answer again, it's nor really clear, i'll edit it

Collectives™ on Stack Overflow

javascript better way to create object with a method using function

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related