Javascript: How can I communicate between different classes?

Question

I'm trying to start using classes in Javascript ( thanks to this guide ). I've learned how to create instances of a class, and how to nest them, but I don't know how to make the child class communicate with its parent.

Here's my basic example: I have a Board class that has an array allPieces , which contains 20 Piece child objects.

function Board(){
    this.allPieces = [];
    this.selectedPiece = null;
    for(var i = 0; i < 20; i++){
        this.allPieces.push(new Piece(i));
    }
}

Board.prototype.makeSelection = function(currentPiece){
    this.selectedPiece = currentPiece;
}

function Piece(index){
    this.type = index;
    this.jqObject = $(".piece").eq(this.type);
    this.jqObject.click(function(){
        this.pieceClicked();
    }.bind(this));
}

Piece.prototype.pieceClicked = function(){
    Board.makeSelection(this); // <------ This gives me an error!
    // How do I tell Board that a selection has been made?
}

new Board();

I can communicate from Board to a Piece by calling this.allPieces[0].anyMethod() However, I don't know how to communicate from Piece to it's parent Board once it's clicked; I get the error "Board.makeSelection is not a function". How can I tell the Board that a piece has been selected?

I've tried assigning a var name to Board var game = new Board(); and then call game.makeSelection(this); but the problem is that this only allows for one instance of Board at a time. I need to have multiple instances. Any suggestions?

Answer 1

In order to accomplish this, you would need to establish some sort of two way data binding on the pieces. You could accomplish this by doing the following.

First, you modify the piece class so it's aware of its parent:

function Piece(index, parent){ // notice the second argument
  this.parent = parent; // we're going to store a reference to the parent here
  this.type = index;
  this.jqObject = $(".piece").eq(this.type);
  this.jqObject.click(function(){
    this.pieceClicked();
  }.bind(this));
}

Piece.prototype.pieceClicked = function(){
  this.parent.makeSelection(this); // we'll access the makeSelection method from the parent
}

Then, you modify the board class so that it passes itself as a second argument into the creation of the piece:

function Board(){
  this.allPieces = [];
  this.selectedPiece = null;
  for(var i = 0; i < 20; i++){
    this.allPieces.push(new Piece(i, this)); 
    // we'll invoke the piece with a second argument which will be the parent (the board)
  }
}

This would allow every piece to be aware of its parent by accessing the this.parent property on the piece. You could then access the make selection method on the parent by accessing this.parent.makeSelection and passing in this as an argument.

Answer 2

When constructing the child (Piece) pass it the current Board (this) so that it has a reference to the board it is part of.

function Board(){
   ...
     this.allPieces.push(new Piece(this, i));
   ...
}
// You will also need to store this reference

function Piece(parentBoard, index) {
   ...
   this.board = parentBoard;
   ...
}

// Now you can use the reference to your parent to make calls

Piece.prototype.pieceClicked = function(){
  this.board.makeSelection(this); 
}