The this keyword in JavaScript, explained with four rules

For a normal function, this is decided by how the function is called, not where it is written. Four rules cover almost every case:

1. Called as obj.method(): this is obj.
2. Called with new: this is the newly created object.
3. Called with call, apply or bind: this is whatever you pass.
4. Called plainly, as fn(): this is undefined in strict mode (classes and modules are strict).

Arrow functions ignore all four: they use the this of the code around them.

'use strict';
const student = {
  name: 'Asha',
  hello() { return `Hi, ${this.name}`; },
  later() { return [1].map(() => this.name)[0]; }
};
console.log(student.hello());
const loose = student.hello;
try { loose(); } catch (e) { console.log('lost this:', e.constructor.name); }
console.log(loose.call({ name: 'Ravi' }));
const bound = student.hello.bind(student);
console.log(bound(), student.later());

Hi, Asha
lost this: TypeError
Hi, Ravi
Hi, Asha Asha

The lost-this bug

Passing obj.method as a callback (to setTimeout, an event listener or map) detaches it from obj, so this is lost. Fix it with bind, or wrap the call: () => obj.method(). In classes, arrow-function class fields are a common fix for event handlers.