I am having trouble accessing the necessary object properties in a method. Here I have a simplified version of what I am trying to do. I have a Game class that is used to make a new game object. Once that object has been made I am trying to run the draw method. The draw method will use information from state.house.color, but I cannot seem to figure out how to access it since using "this" in draw will not refer to the game object. I have used .bind(this) in the past, but that doesn't seem to be helping here as I would need to bind an object not a function. Thanks for any insight!
class Game {
state = {
house: {
color: "blue"
}
}
assets = {
house: {
draw(){
//some logic here such as console.log(this.state.house.color)
}
}
}
};
let testGame = new Game();
testGame.assets.house.draw();
Answer to your problem is arrow function, which won't override this.
class Game {
state = {
house: {
color: "blue"
}
}
assets = {
house: {
draw: () => {
console.log(this.state.house.color);
}
}
}
}
let testGame = new Game()
testGame.assets.house.draw();
You can use bind too (worse in this case):
class Game {
state = {
house: {
color: "blue"
}
}
assets = {
house: {
draw() {
console.log(this.state.house.color);
}
}
}
}
let testGame = new Game()
testGame.assets.house.draw.bind(testGame)();
While you could easily create an arrow function or a bound function that you put in the .assets.house.draw property, the real solution is not to nest properties in a class instance like that. Keep them top-level, don't try to namespace them.
If you really need to, create a separate class:
class House {
constructor(color) {
this.color = color;
}
draw() {
console.log(this.color);
}
}
class Game {
house = new House("blue");
}
const testGame = new Game();
testGame.house.draw();Pass anything that the house needs from the game into its constructor.