javascript - 设置涉及逻辑的函数构造函数属性的最佳方法

Question

我已经学习了很多关于原型(prototype)继承和经典继承的知识，并且我正在尝试重写一些我编写的意大利面条代码以使用其中一种方法。

我遇到的问题是我不确定初始化构造函数属性的最佳方法，因为其中一些属性需要一些逻辑来确定值。

我下面的示例是一个敌人构造函数，该函数在其下面的 spawnEnemy 函数中使用。当我重写这个时，我想我可以使 spawnEnemy 成为原型(prototype)的函数，并由我创建的对象继承它。

我需要确定的第一个值是spawnDir，因为它用于设置敌人的x 和y 坐标。速度也在一组值之间随机化，并且颜色将是稍后重写中的 Sprite ，它将是传入的对象(这不在我的问题范围内)。

我在下面提供了我现有的代码，也许没有像我希望的那样的“干净”解决方案。我想学习最佳实践，并且我不禁觉得有一个解决方案可以在某处使用继承并在实例化某种子类时运行一些附加方法。我只是很难概念化这个模型。

理想的解决方案

我不确定我是否以最好的方式解释了上面的内容，所以我会尽力在这里简明扼要地表达我正在寻找的内容。我希望最好使用经典模型来提供使用构造函数和继承的解决方案，以设置从结果类实例化的对象的属性。

意大利面条代码 (是的，我知道，它非常意大利面条)

  var Enemy = function(color, spawnDir, speed, w, h) {

  // spawnDir is randomized and passed in as argument
  // objects starting position is set based on what spawn direction was set
  if (spawnDir == 0) {
    this.x = -w;
  } else if (spawnDir) {
    this.x = GAME_WIDTH + w;
  }

  this.y = (GAME_HEIGHT / 2) - (h / 2); // objects y coordinate always set to very middle of screen
  this.color = color;                   // color or sprite image of enemy
  this.spawnDir = spawnDir;             // spawn direction passed as argument
  this.speed = speed;                   // speed passed as argument, randomized
  this.width = w;                       // width passed as argument
  this.height = h;                      // height passed as argument
  this.collision = 0;                   // sets whether object has collided, 0 = default, incremenets with each collision detected
  //this.id = generateRandomId(8);        // randomized id assigned to object as identifier (NOT USED CURRENTLY)

  // called in the draw loop, renders object to canvas
  this.draw = function(ctx) {
    ctx.shadowColor = "black";
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };
}; 

// enemy spawn function
var spawnEnemy = function() {
  // if enemies array length is less than enemy reserve limit and spawn counter is set to 0, then success
  if (enemies.length < enemyReserve && spawnCounter == 0) {
    var t;
    var x = Math.floor(Math.random() * 99 + 1); // randomizes spawn direction by generating random number between 0-100
    if (x <= 50) {                              // if the number is less than 50 then spawn is from the left side of the screen
      t = 0;                                    // if the number is greater than 50 then spawn is from the right side of the screen
    } else if (x > 50) {
      t = 1;
    }
    var s = Math.floor(Math.random() * 3 + 1);  // randomizes speed of the enemy
    var enemy = new Enemy("purple", t, s, 40, 20); // instantiates new enemy object with some statis + dynamic arguments

    spawnCounter = spawnRate;                   // spawn counter reset back to default value set in global variables
    enemies.push(enemy);                        // adds the new object to enemies global array
  } else if (spawnCounter != 0) {
    spawnCounter--;                             // if counter is not set to 0 then lowers counter value by 1
  }
};

Answer 1

我更喜欢使用这样的模式:在构造函数中定义属性，在构造函数之后定义任何静态方法，然后在静态方法之后定义原型(prototype)上的成员方法。它最终看起来像这样:

function Enemy(color, spawnDir, speed, w, h) {
  //Define instance properties
  this.spawnDir = spawnDir;
  this.speed = speed;
  this.width = w;
  this.height = h;
  //...
}; 

//Static functions
Enemy.spawn = function(){
  var color, spawnDir, speed, w, h;
  //Calculate variables as needed
  return new Enemy(color, spawnDir, speed, w, h);
};


//Member functions
Enemy.prototype.draw = function(){
    //Do instance stuff.
    //Access instance properties with 'this'
};

至于尝试创建子类(例如不同敌人类型的子类)，请查看 Subclassing a class with required parameters in JavaScript 的答案