JavaScript - Given 2 classes (A and B), how can I call a method from class B to an instance from cla-CodePudding

I am working on creating BattleShip using vanilla JS.

I have 2 classes - Ships and GameBoard.
I have a method in class Ship to accept and validate object coordinates => { 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.

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?

battleShip.placeShip():

CodePudding user response：

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

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

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

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

CodePudding user response：

class Ship {
    updateCoord(x, y) {
    console.log(x,y)
    }
}

class GameBoard extends Ship {

    placeShip() {
        console.log('placeship called')
    }
    show() {
        return  'it is working';
      }
}

const battleShip = new GameBoard();
battleShip.placeShip();

document.getElementById("demo").innerHTML = battleShip.show();

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
</body>
</html>