JavaScript Objects not instantiating

Question

I have a class dynObj, but it appears that seperate instances of it adopt the values of the most recently defined instance.

draw() {
    tmov1 = new dynObj(args...); //Displays as a white ball on webpage, as intended
    tmov2 = new dynObj(different args...); //Seemingly overwrites the properties of tmov1
    objects.push(tmov1, tmov2)
    for (var i in objects) {
        objects[i].dostuff() //Normally causes the object to display as intended,
        };                   //but will only ever display one
};

The class dynObj is as follows:

class baseObj {
  constructor(position, dimentions, properties) {
    this.pos = createVector(position.x,position.y) || null;
    this.shape = properties.shape
    if (this.shape == "ellipse") {
      this.dim = dimentions || {diam:0}
    } else if (this.shape == "quadrilateral") {
      this.dim = dimentions || { x: 0, y: 0 };
    }
  };
};

class dynObj extends baseObj {
  constructor(position, dimentions, suvat, properties) {
    super(position, dimentions, properties);
    self = this
    self.type = 'dynamic'
    self.properties = properties 
    //more definitions with self.x = someval
  };
  getDistance(a,b){
    if (a == undefined || b == undefined) return false;
    var dist = p5.Vector.sub(b,a)
    //console.log(dist)
    return dist
  };
  tick(ticksize) {
    self.assignLastTick(function(lasttick){
      self.lasttick = lasttick
      self.time = self.time + ticksize
      self.updateSuvat(ticksize)
    })    
  };
  //assorted methods...
}

Why do the instances affect eachother? (Can supply a link to this in action if more context is needed)

I suspect you're passing the same `properties` object when creating both objects. The class doesn't make a copy of the properties, it just stores a reference to it. — Barmar, Nov 22 '19 at 23:42

Barmar · Accepted Answer · 2019-11-25T16:42:20.700

The problem is that you're creating a global variable self, and using that instead of this. All the instances are accessing the same global variable, which contains the value of this from the last object that was created.

In the callback function in tick(), you need a way to reference the original object, so you need to bind a local variable self there, rather than using a global variable. See How to access the correct `this` inside a callback?

class dynObj extends baseObj {
  constructor(position, dimentions, suvat, properties) {
    super(position, dimentions, properties);
    this.type = 'dynamic'
    this.properties = properties 
    //more definitions with this.x = someval
  };
  getDistance(a,b){
    if (a == undefined || b == undefined) return false;
    var dist = p5.Vector.sub(b,a)
    //console.log(dist)
    return dist
  };
  tick(ticksize) {
    let self = this;
    this.assignLastTick(function(lasttick){
      self.lasttick = lasttick
      self.time = self.time + ticksize
      self.updateSuvat(ticksize)
    })    
  };
  //assorted methods...
}

Be careful with `this` in Javascript inside nested functions. The `tick` method's `this` won't generally be the same as the callback function's `this` - hence the need to sometimes declare a variable like `var self = this;` so that `self` can be referred to from within the callback function. See https://stackoverflow.com/questions/9644044/javascript-this-pointer-within-nested-function — kaya3, Nov 23 '19 at 00:00
Thanks, this solved it. The `this.time` in the above should be `self.time`, however. — QuartzShard, Nov 25 '19 at 11:38

JavaScript Objects not instantiating

1 Answers1