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