Доступ к экземпляру из функции вне конструктора объекта

Question

У меня есть проблема, которую я не могу понять после многих попыток ее решить.

Чтобы помочь вам понять, есть 2 класса (Game и Board) и третий файл с нажатием клавиши 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();
  }
});

Класс доски связан с классом игры.и так использует это.Элемент управления, использующий код jQuery, находится в третьем файле, а не в классе.

Когда я нажимаю Enter, я получаю неопределенное значение для player1 и 2. Я пробовал разные способы вызова функций получения, и ничего не работает.Я также попытался поместить элементы управления в файл Game, но ничего не получилось.

Я получаю либо undefined, либо getPlayer1 () не является функцией.

Я ищу способ вызова этих методов получения.функции отовсюду, так что я могу использовать player1 и 2, которые мне нужно переместить на доске.

Answer 1

Существует несколько проблем.

1. Обработчик события нажатия клавиши использует Game.prototype, а не экземпляр Game.Вы хотите использовать экземпляр Game, который вы создали и где-то сохранили.Game.prototype не имеет свойств player1 и player2.Они добавляются к экземплярам Game конструктором Game.Ничто никогда не добавляет их к Game.prototype (что правильно, их не должно быть в прототипе).

2. Нет необходимости в getPlayer1 и т. Д. Вы можете получить прямой доступ к player1 и player2.(Можно сделать player1 и player2 приватными и предоставить только для них доступ к ним, но на данный момент это немного сложно и, вероятно, вам пока не захочется.)

3. В методах Game вам необходимо постоянно использовать this.player1 и this.player2, не разыгрывать игроков.

4. Это кажется страннымдля Board для создания экземпляра Game.Похоже, что все должно быть наоборот.

Я предлагаю отступить от этой задачи и сначала попробовать что-нибудь попроще (например, создать класс, экземпляр класса и использовать его).экземпляра в обработчике событий), затем постепенно увеличивая сложность и следя за тем, чтобы на каждом этапе вы понимали, что происходит.По ходу дела у вас могут возникнуть более конкретные вопросы, которые вы можете опубликовать в SO (после тщательного исследования и т. Д.).