How is the value of this determined?

this is not decided by where a function is written — it is decided by how the function is called. The same function can see a different this on every call. Work through these rules in order; the first one that matches wins.

1. Arrow function — it has no this of its own and takes the one from the scope where it was defined. This is fixed at creation and nothing can change it, not even call.
2. Called with new — this is the brand-new instance being constructed.
3. Called with call, apply, or bound with bind — this is the object you passed.
4. Called as a method, obj.fn() — this is obj, the thing to the left of the dot.
5. Called plainly, fn() — this is undefined in strict mode and modules, or the global object (window) otherwise.

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

user.greet();                    // "Hi Mai"        — rule 4

const fn = user.greet;
fn();                            // TypeError       — rule 5, `this` undefined

fn.call({ name: "Nam" });        // "Hi Nam"        — rule 3

Where it usually goes wrong

Passing a method as a callback drops the dot, and with it rule 4:

setTimeout(user.greet, 100);            // `this` lost
setTimeout(() => user.greet(), 100);    // fine — the call keeps the dot
setTimeout(user.greet.bind(user), 100); // also fine

One more trap: in a DOM event handler a regular function gets the element as this, but an arrow function does not — it keeps the enclosing scope's value. Use event.currentTarget when you want the element regardless of which style you chose.