JavaScript - 给定 2 个类（A 和 B），如何将 class B 中的方法调用到 class A 中的实例？
[英]JavaScript - Given 2 classes (A and B), how can I call a method from class B to an instance from class A?
问题描述
I am working on creating BattleShip using vanilla JS.
我正在使用 vanilla JS 创建 BattleShip。
I have 2 classes - Ships and GameBoard.
我有 2 个班级 - 船舶和游戏板。I have a method in class Ship to accept and validate object coordinates => { x: 'a', y: 2}
我在 class Ship 中有一个方法来接受和验证 object 坐标 => { x: 'a', y: 2}I also have a method in GameBoard that I am trying to accept a Ship instance coordinate but I am failing to do as these classes not related.
我在 GameBoard 中也有一个方法，我试图接受一个 Ship 实例坐标，但我没有这样做，因为这些类不相关。
class Ship {
...
updateCoord(x, y) {
...
}
}
class GameBoard {
...
placeShip() { // Will be using this method to place ship within the actual game board.
return Ship.Coord();
}
}
const battleShip = new Ship("BattleShip", ...);
battleShip.updateCoord("c", 2);
How can I edit my code so I can call a method from GameBoard to an instance created by class Ship?如何编辑我的代码，以便我可以从 GameBoard 调用方法到 class Ship 创建的实例？
battleShip.placeShip():
2 个解决方案
解决方案1
0 2022-12-09 17:04:16
That depends on how you want to actually merge them, Below code just example, hope it works the same way as you want这取决于你想如何实际合并它们，下面的代码只是例子，希望它的工作方式与你想要的一样
So i assume you want to "assign" this ship to the game board, meaning the game board must know about this ship.所以我假设您想将这艘船“分配”给游戏板，这意味着游戏板必须知道这艘船。 hence this code因此这段代码
myGameboard.ship = myNewShip;
After that assignment, inside the class Gameboard, you could access it by using this.ship as shown in example below在该分配之后，在 class Gameboard 中，您可以使用this.ship访问它，如下例所示
After introducing the "ship" to "gameBoard" you could directly use your placeShip function to command the known "ship" to go somewhere by calling that instance function将“船”引入“游戏板”后，您可以直接使用您的 placeShip function 通过调用该实例 function 将已知的“船”命令到某处的 go
class Ship { updateCoord = (x, y) => { console.log({x, y}); } } class GameBoard { placeShip(x, y) { return this.ship.updateCoord(x,y); } } myNewShip = new Ship(); myGameBoard = new GameBoard(); myGameBoard.ship = myNewShip; myGameBoard.placeShip(1,2);
This also works the same way when you want to call it the other way around which i just realize might be the way you want it based on the last code you show on your question当您想以另一种方式调用它时，这也以相同的方式工作，我只是根据您在问题上显示的最后一个代码意识到这可能是您想要的方式
class Ship { updateCoord = (x, y) => { console.log({x, y}); } // roundabout way code placeShip = () => { this.gameBoard.ship = this; this.gameBoard.placeShip(); } } class GameBoard { placeShip() { console.log("Call your function"); } } myNewShip = new Ship(); myGameBoard = new GameBoard(); // assigning a gameboard to your ship myNewShip.gameBoard = myGameBoard; // Direct Way myNewShip.gameBoard.placeShip(); // Roundabout Way myNewShip.placeShip();
Enhancement Based on the comments provided about the gameBoard should have more than 1 ship增强 根据提供的关于游戏板的评论应该有超过 1 艘船
class Ship { updateCoord = (x, y) => { console.log({x, y}); } } class GameBoard { placeShip(ship) { // If no need to create outside, can create here actually, and remove the param // ship = new Ship(); // randomize x & y and add other logic if necessary let x = 0; let y = 0; ship.updateCoord(x, y); //two way connection between ship and gameboard ship.gameBoard = ship; return this.ships.push(ship); } } myGameBoard = new GameBoard(); myGameBoard.ships = []; ship1 = new Ship(); ship2 = new Ship(); ship3 = new Ship(); myGameBoard.placeShip(ship1); myGameBoard.placeShip(ship2); myGameBoard.placeShip(ship3);
解决方案2
-2 2022-12-09 17:03:07
We can call both methods in this way.我们可以通过这种方式调用这两种方法。
class Ship { updateCoord(x, y) { console.log("updated coords: ",x,y) } } class GameBoard extends Ship { placeShip() { console.log('placeship called') } show() { return 'it is working'; } } const battleShip = new GameBoard(); battleShip.placeShip(); battleShip.updateCoord(2,3); document.getElementById("demo").innerHTML = battleShip.show();
<!DOCTYPE html> <html> <body> <p id="demo"></p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.