Question

经过很多尝试解决后，我有一个无法理解的问题。

为了帮助您理解，这里有2个类（游戏和棋盘），第三个文件带有jQuery按键控件。游戏与游戏的逻辑有关，而董事会与游戏的显示有关。

这是我希望足以理解的代码的一部分。

// GAME CLASS
function Game(width, height) {
  this.width = width;
  this.height = height;

  this.forbiddenPosition = [];

  this.chartBoard = this.resetBoard();

  this.generateGame();
}

Game.prototype.generateGame = function () {
  this.player1 = new Player("Joueur 1", 100, dagger);
  this.player2 = new Player("Joueur 2", 100, dagger);
  const playerArray = [this.player1, this.player2];
}

Game.prototype.getPlayer1 = function () {
  return this.player1;
};

Game.prototype.getPlayer2 = function () {
  return this.player2;
};
Game.prototype.switchTurn = function (player1, player2) {

  console.log(player1);
  console.log(player2);
};

// BOARD CLASS
const ctx = $('#board').get(0).getContext('2d');

function Board (width, height) {
  this.width = width;
  this.height = height;
  this.game = new Game(this.width, this.height);

  this.displayInfoPlayers(this.game.getPlayer1(), this.game.getPlayer2());
}


Board.prototype.displayInfoPlayers = function (player1, player2) {
  $('.canvas-side__left').css('visibility', 'visible');
  $('.canvas-side__right').css('visibility', 'visible');
  $('.canvas-side__left').addClass('animated slideInLeft');
  $('.canvas-side__right').addClass('animated slideInRight');

  $(".canvas-side__left").html("<h2 class='canvas-side--title'>" + player1.name + "</h2><p class='canvas-side--health'>" + player1.health + "</p><p class='canvas-side--health'>" + player1.weapon.name + "</p>");

  $(".canvas-side__right").html("<h2 class='canvas-side--title'>" + player2.name + "</h2><p class='canvas-side--health'>" + player2.health + "</p><p class='canvas-side--health'>" + player2.weapon.name + "</p>");
};

// CONTROL
$(document).on('keypress', function (e) {
  if (e.which == 13) {
    Game.prototype.switchTurn(Game.prototype.getPlayer1(), Game.prototype.getPlayer2());
    e.stopPropagation();
  }
});

Board类链接到Game类，因此使用它。使用jQuery代码的控件位于第三个文件中，而不位于类中。

当我按Enter键时，将无法为player1和2定义。我尝试了各种方法来调用getter函数，但没有任何效果。我还尝试将控件放在Game文件中，但什么也没做。

我得到的是undefined或getPlayer1（）不是函数。

我正在寻找一种从任何地方调用这些getter函数的方法，以便可以使用需要在板上移动的player1和player2。

Answer 1

那里有几个问题。

按键事件处理程序正在使用Game.prototype，而不是Game的实例。您想使用您创建并存储在某处的Game实例。 Game.prototype没有player1和player2属性。它们由Game构造函数添加到Game的实例中。没有任何东西可以将它们添加到Game.prototype中（这是正确的，它们不应该出现在原型中）。
不需要getPlayer1等。您可以直接访问player1和player2。（将player1和player2设为私有，并且仅为其提供访问器是可能，但是目前有点复杂，可能您还不想做。）
在Game方法中，您需要始终使用this.player1和this.player2，不要绕过玩家。
Board创建Game的实例似乎很奇怪。看来应该是相反的方式。

我建议退出此任务，先尝试一些更简单的操作（例如创建一个类，该类的实例，并在事件处理程序中使用该实例），然后逐步增加复杂性并确保在每个阶段都清楚发生了什么事。在进行过程中，您可能有更具体的问题，可以将其张贴在SO上（经过深入研究等）。

Answer 2

你可以做这样的事情，它应该可以工作。本质上，您对要访问的函数进行原型设计，该函数直到构造函数之后才声明。

class Test {
  constructor() {
    this.five = Test.prototype.getFive();
  }

  getFive() {
    return 5;
  }
}

let test = new Test();
console.log(test.five); // Returns 5

从对象构造函数外部的函数访问实例

2 个答案: