Javascript looped variable correct at first, but then changes

Question

== EDIT: Here is a minimal example https://jsfiddle.net/hpb10ao2/2/ ==

When I use this code:

for (var x = 0; x < 50; x+=10) {
    var obj = new window[type]();
    obj.bounds.position = new Vector(x, 0);
    console.log("RECT at " + obj.bounds.position);
    objects.push(obj);
}
for (var i = 0; i < objects.length; i++)
    console.log(objects[i].position());

where type is "Wall", which is an object with a "bounds" property that has a "position" property. It outputs this:

When I create walls using new Wall() multiple times, this doesn't happen, so it isn't a problem with that function, or any others I made (right?) Why is the position variable different after the loop?

Vector function: http://pastebin.com/4J7S6jbJ

function Vector(x, y) {
    if (x === undefined)
        x = 0;
    if (y === undefined)
        y = 0;
    this.x = x;
    this.y = y;

    this.add = function(x, y) {
        if (y === undefined)
            y = x;
        this.x += x;
        this.y += y;
        return this;
    };
    this.addVector = function(other) {
        this.x += other.x;
        this.y += other.y;
        return this;
    };
    this.subtract = function(x, y) {
        if (y === undefined)
            y = x;
        this.x -= x;
        this.y -= y;
        return this;
    };
    this.subtractVector = function(other) {
        this.x -= other.x;
        this.y -= other.y;
        return this;
    };
    this.multiply = function(x, y) {
        if (y === undefined)
            y = x;
        this.x *= x;
        this.y *= y;
        return this;
    };
    this.multiplyVector = function(other) {
        this.x *= other.x;
        this.y *= other.y;
        return this;
    };
    this.divide = function(x, y) {
        if (y === undefined)
            y = x;
        this.x /= x;
        this.y /= y;
        return this;
    };
    this.divideVector = function(other) {
        this.x /= other.x;
        this.y /= other.y;
        return this;
    };
    this.magnitude = function() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    };
    this.direction = function() {
        return Math.atan(this.y / this.x);
    };
    this.distance = function(other) {
        return Math.sqrt(Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2));
    };
    this.crossProduct = function(other) {
        return this.x * other.y - this.y * other.x;
    };
    this.normalize = function() {
        if (this.x == 0 && this.y == 0) {}
        else if (this.x == 0)
            this.divide(1, this.magnitude());
        else if (this.y == 0)
            this.divide(this.magnitude(), 1);
        else
            this.divide(this.magnitude());
        return this;
    };

    this.toString = function() {
        return this.x + "," + this.y;
    };
    this.clone = function() {
        return new Vector(this.x, this.y);
    };
    this.equals = function(other) {
        return other.x == this.x && other.y == this.y;
    };
}

Can you create a reproducible test case on https://jsfiddle.net? — Madara's Ghost, Apr 27 '16 at 20:21
You're asking us why the `Vector()` function returns different results, without posting the `Vector()` function ? — adeneo, Apr 27 '16 at 20:21
Also, the console updates objects "live", while strings stay the same, which is why you get that result in the console — adeneo, Apr 27 '16 at 20:22
http://stackoverflow.com/questions/7389069/console-log-object-at-current-state — adeneo, Apr 27 '16 at 20:22
What is `.position()`? Does it just return like `this.bounds.position`? Or `obj.bounds.position`? Since each is showing the same value I would assume its returning `obj.bounds.position` instead of its own position — Patrick Evans, Apr 27 '16 at 20:31
@PatrickEvans It returns `this.bounds.position` (position is a `Vector`) — MCMastery, Apr 27 '16 at 20:34
There is your problem, its returning whatever `obj.bounds.position` was set to last, you need to be returning its own position, like `this.bounds.position` — Patrick Evans, Apr 27 '16 at 20:34
@PatrickEvans Never mind, sorry. I was confused - it returns this.bounds.position — MCMastery, Apr 27 '16 at 20:36
Then you need to do as Madara says and add a minimal reproducible test case so we can look at the code and what it is doing — Patrick Evans, Apr 27 '16 at 20:37
I suspect the problem is in the `Wall` constructor, it's using the same `bounds` object for every instance. So every time you create a new `Wall` and assign its `bounds.position`, you're updating all the `Wall`s. — Barmar, Apr 27 '16 at 20:54

score 1 · Accepted Answer · edited May 23 '17 at 10:28

As Barmar pointed out in his comment all your Wall instances are using the same bounds object.

In your fiddle you have

function GameObject() {
    this.bounds = new Rectangle();
}
Test.prototype = new GameObject();
Test.prototype.constructor = Test;
function Test() {
  this.bounds.width = 50;
  this.bounds.height = 50;
}

GameObject constructor does not get called for each of your Test instances, you have to do this your self within your Test constructor

function Test() {
  GameObject.call(this);

Have a look at SLaks' article on js inheritance

Javascript looped variable correct at first, but then changes

1 Answers1