Is it possible for a method within a class to retrieve properties from a different object within the same class?

Question

Is it possible for a method within a class to retrieve properties from a different object within the same class?

I'm facing an issue with accessing the necessary object properties within a method. In my scenario, I have a Game class that generates a new game object. Once the object is created, I attempt to execute the draw method. This draw method requires information from state.house.color, but I'm struggling to find the correct way to access it because using "this" inside draw does not reference the game object. I've used .bind(this) previously, but it doesn't seem to work in this case as I need to bind an object rather than a function. Any advice would be greatly appreciated!

class Game {
    state = {
        house: {
            color: "blue"    
        }
    }
    assets = {
        house: {
            draw(){
                //some logic here like console.log(this.state.house.color)
            }
        }
    }
};

let testGame = new Game();

testGame.assets.house.draw();

javascript object methods

Answer 1

Answer №1

If you're looking for a solution to your issue, consider utilizing arrow functions in JavaScript. They are a great way to prevent the override of the this keyword.

class Game {
    state = {
        house: {
            color: "blue"    
        }
    }
    assets = {
        house: {
            draw: () => {
                console.log(this.state.house.color);
            }
        }
    }
}

let testGame = new Game()

testGame.assets.house.draw();

Another option is to use the bind method, although it may not be as optimal in this scenario:

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

Answer 2

If you're looking for a solution to your issue, consider utilizing arrow functions in JavaScript. They are a great way to prevent the override of the this keyword.

class Game {
    state = {
        house: {
            color: "blue"    
        }
    }
    assets = {
        house: {
            draw: () => {
                console.log(this.state.house.color);
            }
        }
    }
}

let testGame = new Game()

testGame.assets.house.draw();

Another option is to use the bind method, although it may not be as optimal in this scenario:

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

Answer 3

Answer №2

Instead of creating a nested arrow function or bound function within the .assets.house.draw property, it is better to keep properties top-level in a class instance without trying to namespace them.

If necessary, consider creating 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();

Ensure to pass anything that the house requires from the game into its constructor.

Answer 4

Instead of creating a nested arrow function or bound function within the .assets.house.draw property, it is better to keep properties top-level in a class instance without trying to namespace them.

If necessary, consider creating 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();

Ensure to pass anything that the house requires from the game into its constructor.

Is it possible for a method within a class to retrieve properties from a different object within the same class?

Answer №1

Answer №2

Similar questions

Triggering an error message when a user attempts to submit an incomplete angular form

What could be the reason for the unexpected outcome when checking if display is equal to "none"?

Unusual occurrences of backslashes in arrays when using JSON.stringify

Can you group polygons in layers using Phaser?

Guide to displaying database results in an HTML dropdown menu by utilizing AJAX technology

Utilizing the correct method for binding checkboxes in Vue JS for effective two-way communication

Steps to trigger a JavaScript popup from an iframe window to the parent window

Converting Persian calendar date to Gregorian in JavaScript

The icon in Material UI button is missing from the display

Performing a series of synchronous JavaScript calls in Node.js by executing GET requests within a for loop

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery

Encrypt JavaScript for a jade layout

What is the most effective method to avoid duplicating elements in the DOM tree?

Creating a realistic typewriter effect by incorporating Code Block as the input

using async/await to retrieve data from a Google spreadsheet in Node.js

Executing a Javascript function using ssl

What is the best way to extract data from a series of nested JSON objects and insert it into a text field for editing?

How can I assign a prop to a component within the root layout in Next.js version 13, especially when the root layout is required to be a server-side component at all times?

What is the best way to incorporate setTimeout in a loop using Coffeescript?

Is there a way to set a default CSS background image using JavaScript in case the specified