0

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

如您所见，我为此扩展了 Kinetic.Group，因为敌人将拥有更多的动力学元素，而不仅仅是一个矩形。

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

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

问题：每个敌人都获得了“enemy3”的位置，而不是他们自己的位置。因此，每个敌人都将被绘制在位置“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);
}

谁能告诉我我错过了什么，为什么我没有用第一种方法得到单独的对象？

4

3 回答 3

2

继承 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);
}
于 2013-09-15T08:10:59.897 回答
1

我从不看动力学组的代码。但是如果代码使用闭包来创建私有变量，则可能会发生此问题，如下所示：

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);insidefunction Enemy(position, rotation)时，因为这个函数在当前实例中不存在，它会在原型属性中查找那个函数（Kinetic.Group你所有的都一样Enemy）。构造函数创建的所有实例共享var X = 0; 闭包捕获的相同变量。

在第二种情况下，这不会发生，因为您Kinetic.Group为每个Enemy.

更新：（在看了代码之后Kinetic.Group

在代码中，我看到情况有所不同。每个都为您的所有属性Kinetic.Group维护 a和,是定义在 => 所有 Enemy 实例上的方法在您使用时共享相同的实例this.attrs = {};setXgetXKinetic.Group.prototypeattrsKinetic.GroupEnemy.prototype = new Kinetic.Group();

恐怕您不能对这段代码使用继承。

于 2013-09-14T13:03:10.523 回答
0

我认为如果你想在 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();
于 2013-09-14T18:53:52.790 回答