intermediate
this, call, apply, and bind
Invocation-time this binding, explicit binding, permanent binding, and arrow-function lexical this.
`this` is set by the call site, not where the function was defined (except arrow functions). `obj.method()` binds `this` to `obj`. A standalone call uses `undefined` in strict mode. `call` and `apply` invoke with explicit `this`; `bind` returns a permanently bound wrapper.
Arrow functions capture lexical `this` from the surrounding scope and cannot be rebound.
const user = { name: 'Ada', getName() { return this.name; } };
const getName = user.getName;
console.log(getName()); // undefined (strict)
console.log(getName.call({ name: 'Lin' })); // Lin
Method extraction (`const fn = obj.method`) loses the receiver — common in event handlers.
On interviews, explain the concept with a concrete example and name the runtime behavior interviewers probe.
Common pitfalls include mixing similar APIs and forgetting edge cases during live coding.
The trade-off is often clarity versus performance or safety versus convenience.
Checklist:
- Inspect the call site.
- Handle method extraction.
- Use bind deliberately; avoid arrows when dynamic this is required.