this Keyword in Different Contexts

How can you fix the 'this' binding in this code?

class Button {
  constructor(text) {
    this.text = text;
    this.clicked = false;
  }
  click() {
    this.clicked = true;
    console.log(`${this.text} clicked`);
  }
}

const button = new Button('Submit');
const onClick = button.click;
onClick();

Using an arrow function
Using bind(button)
To fix the binding: 1) Use bind() to permanently bind 'this' to button, 2) Alternative is to use an arrow function in the class, 3) call() or apply() would work but need to be used each time, 4) bind() creates a new function with fixed 'this', 5) Common solution for event handlers and callbacks, 6) Prevents 'this' context loss when methods are passed as references.
Using call(button)
Using apply(button)

Next Question (5/20)