Javascript：我如何在不同的类之间进行通信？答案

【问题标题】：Javascript: How can I communicate between different classes?Javascript：我如何在不同的类之间进行通信？
【发布时间】：2014-12-17 21:53:35
【问题描述】：

我正在尝试开始使用 Javascript (thanks to this guide) 中的类。我已经学会了如何创建类的实例，以及如何嵌套它们，但我不知道如何让子类与其父类进行通信。

这是我的基本示例：我有一个 Board 类，它有一个数组 allPieces，其中包含 20 个 Piece 子对象。

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

我可以通过调用this.allPieces[0].anyMethod() 从 Board 与 Piece 进行通信，但是，一旦单击它，我不知道如何从 Piece 与其父 Board 进行通信；我收到错误“Board.makeSelection 不是函数”。我如何告诉董事会一件作品已被选中？

我尝试为 Board var game = new Board(); 分配一个 var 名称，然后调用 game.makeSelection(this);，但问题是这一次只允许一个 Board 实例。我需要有多个实例。有什么建议吗？

【问题讨论】：

Board.makeSelection 不存在，但 Board.prototype.makeSelection 存在
“问题是这一次只允许一个 Board 实例。”大概这是一个游戏，一次应该只有一个棋盘实例？
@GeorgeJempty 不，会有不止一个董事会。我试图让每个 Piece 与其直接父 Board 通信，而不是与任何通用 Board 通信。但我确实在下面找到了一个很好的答案！

标签： javascript class oop inheritance

【解决方案1】：

为了实现这一点，您需要在片段上建立某种双向数据绑定。您可以通过执行以下操作来完成此操作。

首先，您修改片段类，使其知道其父类：

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
}

然后，您修改 board 类，使其将自身作为第二个参数传递给片段的创建：

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.parent 属性来了解其父片段。然后，您可以通过访问 this.parent.makeSelection 并将 this 作为参数传入来访问父级上的 make selection 方法。

【讨论】：

你不是说this.allPieces.push(new Piece(i, this));吗？
@MarcoDelValle 是的，我就是这个意思！我更正了它，它现在应该对你有用了！

【解决方案2】：

在构造子 (Piece) 时，将当前 Board (this) 传递给它，以便它引用它所属的板。

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

【讨论】：