In JavaScript, how does the engine decide what `this` refers to inside a regular (non-arrow) function, and in what order do the binding rules apply when more than one could?

## The one sentence that unlocks everything In JavaScript, a regular function's `this` is **not** part of the function. It is not captured when the function is written, it is not a property of the object the function happens to live on, and it is not the function itself. It is an extra, invisible argument that the engine computes **at each call, from the shape of the call site**. The same function object can therefore see four different `this` values in four consecutive lines. So the whole skill is: look at how the function is *called*, not where it was *defined*, and apply four rules in order. ## Rule 1 — new binding (highest priority) If the call site is `new F(...)`, `this` inside `F` is the freshly created object, and — unless the constructor explicitly returns some other object — that object is also the result of the expression. ```js function Point(x) { this.x = x; } const p = new Point(3); p.x; // 3 — this was the new object ``` Because this rule sits at the top, it beats anything else the call site could have said about the receiver. ## Rule 2 — explicit binding If the call passes a receiver explicitly, that receiver wins over anything the syntax implies: ```js function who() { return this.tag; } const a = { tag: 'a', who }; a.who(); // 'a' — implicit a.who.call({ tag: 'x' }); // 'x' — explicit beats implicit ``` One detail worth knowing: what you pass is not always what you get. In a **sloppy-mode** function, a `null` or `undefined` receiver is replaced by `globalThis`, and a primitive receiver is boxed into a wrapper object. In a **strict-mode** function the value is passed through untouched, so `this` really can be `null`, `7`, or `'hi'`. ## Rule 3 — implicit binding (the object before the dot) If the call is a property access — `obj.f()`, `obj['f']()`, `arr[0].f()` — then `this` is the object that the property was read from. Formally, the call target evaluates to a Reference whose *base* is that object, and the engine passes the base as `this`. ```js const counter = { n: 0, inc() { this.n++; } }; counter.inc(); counter.n; // 1 ``` Only the **immediate** base matters. In `app.db.users.save()`, `this` is `app.db.users`; the outer containers are irrelevant. ## Rule 4 — default binding (lowest priority) A bare call — `f()`, or a function value invoked without a receiver — matches no rule above, so the default applies: - **Sloppy mode:** `this` is `globalThis`. - **Strict mode:** `this` is `undefined`. Strict mode is not exotic any more: class bodies are always strict, ES module code is always strict, and most bundled or linted code opts in. That is why the modern failure mode is `TypeError: Cannot read properties of undefined` rather than a silent write to a global. The same default catches a plain function *nested inside* a method — the enclosing method's receiver is not inherited by an inner `function`, because that inner call site has no receiver of its own. ## Reading a call site in practice Given any invocation, ask in order: 1. Is there a `new` in front? → the new object. 2. Is there a `.call(...)`, `.apply(...)`, or was this function produced by `.bind(...)`? → that receiver. 3. Is there a dot (or bracket) immediately before the parentheses? → the object left of it. 4. Otherwise → `globalThis` or `undefined`, depending on strictness. ```js function report() { console.log(this === globalThis ? 'default' : this.label); } const o = { label: 'implicit', report }; o.report(); // 'implicit' report.call({ label: 'explicit' }); // 'explicit' report(); // 'default' (sloppy-mode script) new report(); // undefined — the new object has no label ``` ## The one function shape that ignores all four Arrow functions have no own `this` at all, so none of these rules can set it — they read `this` from the enclosing scope, and even `call`/`apply` cannot change it. Treat them as outside the precedence table rather than as a fifth entry in it. ## Why interviewers like this Every real `this` bug is one of these rules firing when the author expected a different one: a method used as a value, a helper function nested in a method, a constructor invoked without `new`. Being able to name the rule that fired — instead of reaching for a fix by reflex — is what the question is testing.