You need to hand an object's method to a callback API such as setTimeout without losing its receiver. Compare binding the method once in the constructor with wrapping the call in an arrow function at the call site.

## The two fixes side by side ```js class Ticker { constructor() { this.count = 0; this.tick = this.tick.bind(this); // fix at the definition } tick() { this.count++; } } const t = new Ticker(); setTimeout(t.tick, 100); // safe: the receiver travels with it ``` ```js class Ticker { count = 0; tick() { this.count++; } } const t = new Ticker(); setTimeout(() => t.tick(), 100); // fix at the call site ``` ## What constructor binding actually creates `Function.prototype.bind` returns a **new** function object whose receiver is fixed. Assigning it to `this.tick` inside the constructor creates an own data property on the instance; the original `tick` is still on the prototype, now shadowed for that instance: ```js Object.hasOwn(t, 'tick'); // true t.tick === Object.getPrototypeOf(t).tick; // false ``` Consequences worth naming in an interview: - **Every consumer is safe.** Callers cannot detach the receiver even by accident, because there is nothing to detach — the function carries it. - **Stable identity per instance.** `t.tick` is the same object every time you read it, so anything that stores functions in a `Set`, keys a `Map` by them, or compares them across renders sees one value rather than a new one each pass. - **Per-instance cost.** One bound function per method per instance, allocated in the constructor. For a handful of long-lived services this is nothing; for thousands of short-lived objects it is measurable. - **No re-targeting.** The bound copy ignores a later attempt to call it with a different receiver, which is usually what you want and occasionally the thing that surprises you. - **Boilerplate.** Each new method needs its own line, and forgetting one reintroduces the bug silently. A class field holding an arrow function (`tick = () => { this.count++; }`, standardised in ES2022) is the modern shorthand for the same shape: also per-instance, also own-property, also stable — with the same allocation cost and the same loss of prototype sharing. ## What the arrow wrapper actually does `() => t.tick()` is not "an arrow that fixes `this`" for the method — the method inside is called with a dot, so the *ordinary* method-call rule supplies the receiver. That distinction matters: - **The class is untouched.** Other call sites, subclasses and tests see the plain prototype method. - **Late lookup.** The property is read when the wrapper runs, so if `t.tick` is replaced (a spy in a test, a decorated version) the wrapper picks up the current one. - **Explicit arguments.** `() => t.tick(payload)` gives you control over what the callback forwards, which is useful when the API passes arguments you do not want. - **A fresh function each evaluation.** Written inside a loop or a frequently-called function, each pass allocates a new wrapper with a distinct identity. If something downstream keys on function identity, that difference is visible. - **The receiver is captured by name.** The wrapper closes over the variable `t`; if that binding is reassigned, the wrapper follows it. ## The third fix: an API that accepts a receiver Some built-ins take a receiver argument, which avoids both an allocation and a wrapper: ```js [1, 2, 3].forEach(counter.add, counter); // thisArg is the second parameter Array.from(iterable, mapper, receiver); // thisArg is the third parameter ``` `Array.prototype.map`, `filter`, `some`, `every`, `find`, `findIndex` and `flatMap` accept the same `thisArg`, as do `Set.prototype.forEach` and `Map.prototype.forEach`. Two caveats: an arrow callback ignores `thisArg` entirely, since an arrow has no own receiver to set; and `setTimeout` does **not** offer one — its extra arguments are forwarded to the callback as parameters. ## How to choose Ask who owns the risk. If your object is handed to code you do not control, or the same handler must be referenced more than once as a single stable value, bind once at construction (or use an arrow class field) so misuse is impossible. If you are the consumer wiring up one call, wrap at the call site — it is local, it leaves the shared prototype method intact, and it reads as exactly what it is. Reach for `thisArg` when the API already provides it. What you should not do is rely on documentation telling every caller to remember `.bind()`.