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.