How this works

Why this exists

One method should work for many objects. A greet method on every user should say that user's name. this lets the method refer to "whichever object I was called on" without knowing its name in advance.

function greet() {
  return `Hi, I am ${this.name}`;
}
const asha = { name: 'Asha', greet };
const ravi = { name: 'Ravi', greet };
console.log(asha.greet()); // Hi, I am Asha
console.log(ravi.greet()); // Hi, I am Ravi

Rule 1: method call → the object before the dot

When you call obj.method(), this inside method is obj. Only the call matters: the same function gives a different this when called on another object.

Rule 2: plain call → undefined (strict mode)

Calling a function on its own, f(), gives this = undefined in strict mode (modules and classes are always strict). In old sloppy scripts it is the global object (window in browsers), which hides bugs.

The lost-this bug

'use strict';
const counter = {
  count: 0,
  inc() { this.count++; return this.count; },
};
const inc = counter.inc;   // just the function, the object is lost
// inc();                   // TypeError: Cannot read properties of undefined
setTimeout(counter.inc, 0); // same bug: called later as a plain function

Passing a method as a callback passes only the function. When it is later called without an object before a dot, this is lost.

Rule 3: call, apply and bind set this yourself

function intro(city, state) {
  return `${this.name} from ${city}, ${state}`;
}
const user = { name: 'Meena' };
console.log(intro.call(user, 'Kochi', 'Kerala'));     // arguments one by one
console.log(intro.apply(user, ['Kochi', 'Kerala']));  // arguments as an array
const bound = intro.bind(user);                       // a NEW function with this fixed
console.log(bound('Kochi', 'Kerala'));

Rule 4: new → the brand-new object

With new (constructors and classes, next topics), this is the new object being built.

Arrow functions take this from outside

An arrow function has no this of its own. Inside it, this means whatever this was in the code around it when the arrow was created. That makes arrows perfect for callbacks inside methods, and wrong as methods themselves.

const timer = {
  seconds: 0,
  start() {
    // arrow: this is still timer
    const tick = () => { this.seconds++; };
    tick(); tick();
    return this.seconds;
  },
};
console.log(timer.start()); // 2