bind(), call(), and apply()

Why will this code fail to track clicks correctly?

const button = document.querySelector('button');
class Handler {
  constructor() {
    this.clicks = 0;
  }
  handleClick() {
    this.clicks++;
    console.log(this.clicks);
  }
}

const handler = new Handler();
button.addEventListener('click', handler.handleClick);

The constructor is wrong
The event listener is not properly registered
The this context is lost in the event handler
This code fails because: 1) Event handlers lose their class instance context, 2) this refers to the button element when handler executes, 3) clicks property becomes undefined when accessed, 4) Common issue in event-based programming, 5) Can be fixed using bind() in constructor or arrow function, 6) Important consideration when working with class methods as callbacks.
The clicks property is not initialized

Next Question (17/20)