Glossary / this binding

this binding

For traditional JavaScript functions, this is generally determined by the call form, not by where the function was defined. The same function can receive different this values when called as a method, a plain function, through call/apply, or with new. Arrow functions are the key exception: they capture this lexically and do not define their own receiver.

The main call forms

const account = {
  balance: 10,
  read() { return this.balance; },
};
account.read(); // this is account

const detached = account.read;
detached(); // undefined receiver in strict code; property access then fails

• Method call: obj.fn() supplies obj as the receiver.
• Plain call: fn() supplies undefined in strict mode; sloppy functions substitute the global object.
• Explicit call: fn.call(receiver, ...) or fn.apply(receiver, args) supplies a receiver, subject to strict/sloppy conversion rules.
• Construction: new Fn() binds this to the new instance (unless the constructor returns another object).
• Bound function: fn.bind(receiver) creates a wrapper with a fixed receiver for ordinary calls.
• Arrow: this comes from the enclosing lexical environment.

Strict functions preserve nullish and primitive receivers instead of substituting/boxing them. Class methods are strict, so detached class methods commonly fail. DOM event APIs and frameworks may specify their own callback receiver conventions; check the API contract.

Debugging checklist

When this is unexpectedly undefined or points at the wrong object, inspect the exact call expression, whether a method was extracted, whether it was bound, whether the function is an arrow, and whether a callback framework controls invocation. Prefer an explicit closure or bound function when receiver preservation is intentional. Do not use arrows for object methods that need per-call dynamic this.

Interview questions

1. What determines this in an ordinary function? Its invocation form/call site.
2. What is this in a strict plain call? Undefined.
3. Why does extracting a method lose its receiver? The later plain call no longer has the original object before the dot.
4. Can call change an arrow’s this? No; arrows capture it lexically.
5. What does new do to this? It supplies the newly allocated instance to the constructor call.

References

• MDN: this
• ECMAScript: OrdinaryCallBindThis