Access an instance from a function outside of the object constructor

I have a problem I can’t understand after a lot of attempts to solve it.

To help you understand, there are 2 classes (Game and Board), and a third file with the jQuery keypress controls. Game is about the logic of the game, and Board about the display.

Here is a part of the code I hope sufficient to understand.

// 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 class is linked to Game class and so uses this. The control using jQuery code are in a third file and not into a class.

When I press Enter, I get undefined for player1 and 2. I tried different ways to call the getter functions and nothing works. I also tried to put the controls inside the Game file and still nothing.

I get either undefined or getPlayer1() is not a function.

I am looking for a way to call these getter functions from everywhere so I can use player1 and 2 which I need to move on the board.

Answer

There are several issues there.

1. The keypress event handler is using Game.prototype, not an instance of Game. You want to be using an instance of Game you’ve created and stored somewhere. Game.prototype doesn’t have the player1 and player2 properties. They’re added to instances of Game by the Game constructor. Nothing ever adds them to Game.prototype (which is correct, they shouldn’t be on the prototype).

2. There’s no need for getPlayer1, etc. You can directly access player1 and player2. (It’s possible to make player1 and player2 private and only provide accessors for them, but it’s a bit complicated at the moment and probably not something you want to take on yet.)

3. Within Game methods, you need to consistently use this.player1 and this.player2, don’t pass the players around.

4. It seems odd for Board to create an instance of Game. It seems like it should be the other way around.

I suggest stepping back from this task and trying something simpler first (like creating a class, an instance of the class, and using that instance in an event handler), then incrementally adding complexity and making sure at each stage you’re clear on what’s happening. As you go, you may have more specific questions, which you can post on SO (after thorough research, etc.).