Question

我在JavaScript中获得了以下“Enemy”类：

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

正如你所看到的，我为此扩展了一个Kinetic.Group，因为敌人会有更多的动能元素而不仅仅是一个矩形。

现在我创建一些“Class”实例并将它们添加到游戏层：

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

问题：每个敌人都获得“敌人3”的位置，而不是他们自己的位置。因此，每个敌人都会被吸引到“200,200”的位置。 现在如果我在没有继承的情况下尝试这个，它可以正常工作：

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

任何人都可以告诉我我错过了什么，以及为什么我没有使用第一种方法获得单独的对象？

Answer 1

没有问题继承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

我从不看动能组的代码。但是如果 代码使用闭包来创建私有变量 ，就会发生这个问题：

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;
}

当您声明Enemy.prototype = new Kinetic.Group();， 时，只创建了1个Kinetic.Group 。当你在this.setX(position.posX);内调用function Enemy(position, rotation)时，因为当前实例中不存在此函数，它将在 prototype属性中查找该函数（同一Kinetic.Group适用于所有Enemy） 。构造函数创建的所有实例共享由闭包捕获的相同变量var X = 0; 。

在第二种情况下，这不会发生，因为您为每个Kinetic.Group创建了新的Enemy。

更新（在看了Kinetic.Group
的代码之后
在代码中，我看到的情况有所不同。每个Kinetic.Group为您的所有媒体资源保留this.attrs = {};，setX，getX是Kinetic.Group.prototype =＆gt;上定义的方法当您使用attrs
时，您的所有Enemy实例共享Kinetic.Group个Enemy.prototype = new Kinetic.Group();实例的{{1}}个实例
我担心你不能在这段代码中使用继承。

Answer 3

我认为如果你想在javascript中继承，你也应该在Enemy构造函数中调用Group构造函数。写得像这样：

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

JS类的多个实例

3 个答案: