Multiple Instances of JS Class

Question

I got the following "Enemy" Class in JavaScript:

function Enemy(position, rotation) {
    this.name = null;

    this.enemyForm = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 20,
        height: 20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
    });
    this.setX(position.posX);
    this.setY(position.posY);
    this.setRotation(rotation);
    this.setOffset(10, 10);
    this.add(this.enemyForm);
}

Enemy.prototype = new Kinetic.Group();

As you can see, i extend a Kinetic.Group for that because the Enemies will have some more Kinetic Elements and not just a Rectangle.

Now i create some Instances of that "Class" and add them to the game layer:

 var enemy1 = new Enemy({posX: 50, posY: 50}, 0);
 this.layer.add(enemy1);
 var enemy2 = new Enemy({posX: 100, posY: 100}, 0);
 this.layer.add(enemy2);
 var enemy3 = new Enemy({posX: 200, posY: 200}, 0);
 this.layer.add(enemy3);

The problem: Every Enemy gets the position of "enemy3", and not their own. So, every Enemy will be drawn at position "200, 200". Now if i try this without inheritance, it works fine:

function Enemy(position, rotation) {
    this.name = null;
    this.enemyForm = new Kinetic.Group();

    var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 20,
        height: 20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
    });
    this.enemyForm.setX(position.posX);
    this.enemyForm.setY(position.posY);
    this.enemyForm.setRotation(rotation);
    this.enemyForm.setOffset(10, 10);
    this.enemyForm.add(rect);
}

Can anyone tell me what i am missing, and why i don´t get separate objects with the first method?

Answer 1

No problem subclassing the Kinetic.Group:

// a bunch of code from 
// http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js

//optionally a config object can be passed to the constructor
//http://kineticjs.com/docs/Kinetic.Group.html
var Test = function(config){
  Kinetic.Group.call(this,config);
};
Test.prototype=Object.create(Kinetic.Group.prototype);

var test = new Test();

for(s in test){
  console.log(s);
}

Answer 2

I never look at the code of kinetic group. But this problem could happen if the code uses closure to create private variables like this:

Kinetic.Group = function(){
    var setX, getX;
    (function() {
       var X = 0;
       getX = function(){
          return X ;
       };
       setX = function(v){
          X = v;
       };
     })();

    this.setX = setX;
    this.getX = getX;
}

When you declare Enemy.prototype = new Kinetic.Group();, there is only 1 Kinetic.Group created. When you call this.setX(position.posX); inside function Enemy(position, rotation), because this function does not exist in the current instance, it will look up that function in the prototype property (the same Kinetic.Group for all your Enemy). All your instances created by the constructor function share the same variable var X = 0; captured by the closure.

In your second case, this does not happen because you create a new Kinetic.Group for each Enemy.

Update:(after taking a look at the code of Kinetic.Group

In the code, I see the case is different. Each Kinetic.Group maintains a this.attrs = {}; for all your properties and the setX,getX are methods defined on Kinetic.Group.prototype => all your Enemy instances share the same attrs of a Kinetic.Group instance when you use Enemy.prototype = new Kinetic.Group();

I'm afraid that you cannot use inheritance with this code.

Answer 3

I think if you want to have inheritance in javascript you should also call Group constructor in Enemy constructor. Write it like this:

function Enemy(position, rotation) {

    // it create properties(and probably functions) on with Kinetic.Group depends
    // you could also pass x, y, rotation and offset in argument of this constructor
    Kinetic.Group.apply(this, [{}]);        

    this.name = null;
    this.enemyForm = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 20,
        height: 20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 1
    });
    this.setX(position.posX);
    this.setY(position.posY);
    this.setRotation(rotation);
    this.setOffset(10, 10);
    this.add(this.enemyForm);
}

Enemy.prototype = new Kinetic.Group();