How this is decided

Model answer. For regular functions, this is decided at call time by how the function is called, in this order of priority:

1. `new Fn()`: this is the brand-new object.
2. Explicit binding with call, apply or bind: this is the object you passed.
3. Method call obj.method(): this is obj (the thing before the dot).
4. Plain call fn(): undefined in strict mode or modules; the global object in sloppy mode.

Arrow functions ignore all of these: they take this from the surrounding scope where they were written.

const timer = {
  seconds: 0,
  start() {
    setInterval(() => { this.seconds++; }, 1000);  // arrow: this = timer
  },
};
const start = timer.start;
start();   // plain call: this is undefined inside start (in strict mode)

In a DOM event listener written as a regular function, this is the element the listener is attached to (event.currentTarget); with an arrow function it is whatever this was outside.

The most common bug is losing this by passing a method as a callback (setTimeout(obj.method)); fix it with an arrow wrapper or bind.