class - Javascript: How can I communicate between different classes? - Stack Overflow

admin管理员组

文章数量:1316336

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 municate 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 municate from Board to a Piece by calling this.allPieces[0].anyMethod() However, I don't know how to municate 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?

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 municate 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 municate from Board to a Piece by calling this.allPieces[0].anyMethod() However, I don't know how to municate 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?

• javascript
• class
• oop
• inheritance

Share Improve this question Follow asked Dec 17, 2014 at 21:53 M -M - 28.5k1212 gold badges5454 silver badges9292 bronze badges 3

• Board.makeSelection doesn't exist, but Board.prototype.makeSelection does – elclanrs Commented Dec 17, 2014 at 21:55
• "The problem is that this only allows for one instance of Board at a time." Presumably this is for a game and there should only ever be one instance of a board at a time? – Dexygen Commented Dec 17, 2014 at 22:03
• @GeorgeJempty no, there would be more than one Board. I'm trying to have each Piece municate with its direct parent Board, not to any generic Board. But I did find a good answer below! – M - Commented Dec 17, 2014 at 22:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

In order to acplish this, you would need to establish some sort of two way data binding on the pieces. You could acplish 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.

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); 
}

本文标签： classJavascript How can I communicate between different classesStack Overflow