The "this" Keyword in JavaScript — Finally Make Sense of It

this confuses everyone because it is decided at call time, not write time. Four rules cover every case.

The four rules (in priority order)

1. new: new Fn() → this = the new object
2. Explicit: fn.call(obj) / apply / bind → this = obj
3. Method call: obj.fn() → this = obj (whatever is left of the dot)
4. Default: plain fn() → undefined in strict mode (window otherwise)

The classic bug

const user = {
  name: "Ravi",
  greet() { console.log(this.name); }
};
user.greet();               // "Ravi"  — rule 3
const g = user.greet;
g();                        // undefined — rule 4, the dot is gone!
setTimeout(user.greet, 100); // same bug
setTimeout(() => user.greet(), 100); // ✅ fixed

Arrow functions — the exception

Arrows have no own this — they inherit it from where they were written. Perfect for callbacks, wrong for object methods.

Drill this with the JS interview questions — it appears in nearly every set.