The this keyword

this is an extra parameter you never declared

Every ordinary function call quietly passes one more argument than you wrote. You never name it, you never see it in the parameter list, and inside the body it is called this.

What goes in it is not decided when you write the function. It is decided at the moment of the call, by the shape of the call itself. That single sentence dissolves most this confusion, because it means the same function can be handed a different this on every line that calls it.

function whoAmI() {
  return this;
}

const a = { name: "a", whoAmI };
const b = { name: "b", whoAmI };

a.whoAmI();        // this is a
b.whoAmI();        // this is b — same function, different answer
whoAmI();          // this is undefined (strict) — nobody to be

One function, six call sites

The same describe function, called six different ways. Step through and watch which rule fires and what this lands on.

Dry run: the same describe() function, six call sites

Same function, five different outcomes — nothing about describe's own code ever changes. The two default-binding rows are the same bug wearing two different outfits: both strip the dot off before the call happens, one by assignment, one by passing the method as a callback.

The four rules, ranked

Four rules can set this, and when more than one could apply, the higher-ranked one wins. Work down the list and stop at the first match.

Only the last dot counts

With implicit binding it is easy to assume the whole path matters. It does not — only the object immediately left of the final dot does.

const app = {
  name: "app",
  inner: {
    name: "inner",
    who() { return this.name; },
  },
};

app.inner.who();     // "inner" — not "app"

call, apply and bind

function greet(greeting, mark) {
  return greeting + ", " + this.name + mark;
}
const user = { name: "ana" };

greet.call(user, "Hi", "!");      // "Hi, ana!"  — arguments listed
greet.apply(user, ["Hi", "!"]);   // "Hi, ana!"  — arguments in an array

const hi = greet.bind(user, "Hi");
hi("!");                          // "Hi, ana!"  — returns a new function instead of calling

The mnemonic writes itself: call takes commas, apply takes an array — and bind is the odd one out because it does not run anything, it hands you a new function with this permanently attached. Binding an already-bound function a second time does nothing; the first weld holds.

Arrow functions opt out entirely

An arrow function has no this of its own. None of the four rules apply to it. When you write this inside an arrow, it is resolved like any other variable — by looking outwards through the scopes it was written in, exactly the way the scope chain works.

const timer = {
  label: "timer",

  withFunction() {
    [1].forEach(function () {
      console.log("function callback:", this === undefined ? "undefined" : this.label);
    });
  },

  withArrow() {
    [1].forEach(() => {
      console.log("arrow callback:  ", this.label);
    });
  },
};

timer.withFunction();
timer.withArrow();

The plain function callback gets its own this by rule 4 — nobody called it with a dot, so it is undefined. The arrow has none to get, so it keeps reading the this belonging to withArrow, which is timer. This is the entire reason arrows took over callbacks.

How this gets lost — and the three fixes

Almost every real this bug is the same move: the function gets separated from its dot. Three ways it happens, all identical underneath.

const counter = {
  count: 0,
  increment() { this.count++; return this.count; },
};

// 1. Pulled out into a variable
const inc = counter.increment;
inc();                              // 💥 this is undefined

// 2. Passed as a callback
button.addEventListener("click", counter.increment);   // 💥
setTimeout(counter.increment, 100);                    // 💥

// 3. Destructured out
const { increment } = counter;
increment();                        // 💥 same thing, shorter spelling

The fixes, in the order you should reach for them:

// A. Wrap it in an arrow — the call keeps its dot
setTimeout(() => counter.increment(), 100);

// B. Bind it, when you need a reusable detached function
const inc = counter.increment.bind(counter);

// C. In a class, make it a field holding an arrow — bound at construction
class Counter {
  count = 0;
  increment = () => { this.count++; };   // safe to pass anywhere
}

Option A is usually right, because it keeps the object and the method together at the call site where a reader can see them. Option C costs one function per instance rather than one per class, which only matters when you are making thousands of them.

this in a class

class Timer {
  constructor(label) {
    this.label = label;        // rule 1 — this is the new instance
    this.ticks = 0;
  }

  tick() {                     // rule 3 when called as timer.tick()
    this.ticks++;
  }
}

const t = new Timer("mine");
t.tick();                      // fine — there is a dot
[1, 2, 3].forEach(t.tick);     // 💥 no dot. Classes are strict, so this is undefined

Class bodies are always in strict mode, which means a lost this inside a class throws rather than silently writing properties onto the global object. That is a feature: the old sloppy-mode behaviour turned this same bug into a mysterious global variable instead of an error.

this in an event handler

button.addEventListener("click", function () {
  this;                  // the element the listener is attached to
  this.classList.add("on");
});

button.addEventListener("click", () => {
  this;                  // NOT the button — whatever the surrounding scope had
});

The traps, collected

• Passing a method as a callback — onClick={obj.method}, setTimeout(obj.method), arr.map(obj.method). The dot does not travel.
• An arrow as an object method — it reads this from the file, not the object.
• A plain function callback inside a method — it gets default binding. Use an arrow, or the second argument of forEach/map, which sets this for you.
• Assuming the whole path binds — only the last dot counts.
• Expecting a re-bind to work — the first one is permanent.