JS类的多个实例

Multiple Instances of JS Class

本文关键字：实例 JS      更新时间：2023-09-26

我在 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，因为敌人将有更多的动力学元素，而不仅仅是一个矩形。

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

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

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

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

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

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

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

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

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

恐怕你不能在这个代码中使用继承。

我认为

如果你想在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();
相关文章：