this, and the four ways it gets set

this is not fixed to where a function is defined — it is set by how the function is called, freshly, every time.

"use strict";
const user = {
  name: "Nino",
  greet() { return `Hi, ${this.name}`; },
};

user.greet();               // "Hi, Nino" — called as user.greet()
const g = user.greet;
g();                        // TypeError — called with no receiver

greet is the exact same function in both calls. What changed is the call site: user.greet() sets this to user; g() sets this to undefined, so reading this.name throws. That is strict-mode behaviour, and ES modules and class bodies are always strict. In old non-strict script code a plain call gets globalThis instead, and g() would quietly read globalThis.name ("Hi, undefined" in Node) — which is worse, because nothing fails. The sandbox runs examples as non-strict CommonJS-style code, so they opt in with "use strict" on the first line.

The four rules, in the order that matters

1. new Fn() — this is the newly created object.
2. fn.call(obj) / fn.apply(obj) / fn.bind(obj) — this is whatever you explicitly hand it.
3. obj.method() — this is obj, the thing left of the dot.
4. A plain call, fn() — this is undefined in strict mode (globalThis otherwise, which is almost never what anyone wants).

Try it

1"use strict";2 3const counter = {4  count: 0,5  increment() {6    this.count += 1;7    return this.count;8  },9};10 11export function run() {12  const results = [];13  results.push(counter.increment());       // called on counter14  const loose = counter.increment;15  try {16    loose();                                // plain call, no receiver17    results.push("no error");18  } catch (e) {19    results.push(`${e.name}: ${e.message}`);20  }21  return results;22}

Arrow functions do not have their own this

An arrow function does not set this at all — it reads this from the scope it was written in, the same way it reads any other outer variable, and none of the four rules above apply to it.

const timer = {
  label: "countdown",
  start() {
    setTimeout(function () {
      console.log(this.label);   // undefined — setTimeout chose this
    }, 0);
    setTimeout(() => {
      console.log(this.label);   // "countdown" — reads this from start()
    }, 0);
  },
};

A regular function passed as a callback gets whatever this the code calling it decides on: .then() calls its callbacks with undefined (which non-strict code turns into globalThis), Node's setTimeout passes its own Timeout object, a DOM listener gets the element. It is never the method's this. An arrow function passed the same way keeps the method's this, because it never had one of its own to replace. The flip side: an arrow function used as a method does not see the object either.

1"use strict";2 3export function run() {4  const cart = {5    items: ["pen", "lamp"],6    regular() {7      return this === cart;8    },9    arrow: () => this === cart,10    countLater() {11      return [1].map(() => this.items.length)[0];12    },13  };14  return {15    regularSeesCart: cart.regular(),16    arrowSeesCart: cart.arrow(),17    arrowCallbackInMethod: cart.countLater(),18  };19}

Fixing a method passed as a callback

class Button {
  constructor(label) { this.label = label; }
  onClick() { console.log(`clicked ${this.label}`); }
}

const b = new Button("Save");
el.addEventListener("click", b.onClick);          // this is the element, not b
el.addEventListener("click", () => b.onClick());  // fixed — arrow reads b
el.addEventListener("click", b.onClick.bind(b));   // fixed — this is pinned

Both fixes work. .bind creates a new function permanently locked to that this; the arrow wrapper is usually shorter and just as correct. Lesson 8 looks at call, apply and bind in detail.

Common mistakes

• Passing obj.method as a callback. The function arrives without its object; in strict code this is undefined and the first this.x throws a TypeError, as the first example shows.
• Writing an object method as an arrow function. { total: () => this.items.length } reads this from outside the object literal, so it never sees the object.
• A regular function inside a method. items.forEach(function () { this.count++ }) is a plain call; is not the object. Use an arrow function.