Pass Class method in a functions aruguments to call within the function

Question

I want to pass a class method into a function and call that method inside that function. Here is the code:

class Cube {
    constructor() { //setup the cube and if using a previous cube, setup with that
        this.white = 'white'
    }
    changeColour(){
        this.white = 'yellow'
    }
}

const cubeClass = new Cube()

function change(classMethod){
    classMethod()
}
change(cubeClass.changeColour)

I am getting this error:

Cannot read properties of undefined (reading 'white')

I want it to be able to change the colour in the class, from calling the change function, so it can change it from white to yellow

score 1 · Accepted Answer · answered May 21 '23 at 08:56

You have to bind this to the context of the changeColour method to the cubeClass object:

change(cubeClass.changeColour.bind(cubeClass));

This will ensure that when the changeColour method is called within the change function, the context is correctly set to cubeClass, allowing the method to access and modify the white property.

score 0 · Answer 2 · answered May 21 '23 at 08:59

Learn what is this in JS. That's a context under a function is called.
In your code you lose the context here:

change(cubeClass.changeColour);

You pass a method as an argument but not its class instance. There're 2 fixes:

bind the class instance to your argument:

change(cubeClass.changeColour.bind(cubeClass);

a more cleaner way is to provide a wrapper function where the context is defined:

change(() => cubeClass.changeColor());

Pass Class method in a functions aruguments to call within the function

2 Answers2