What is the difference between implicit and explicit binding? When does implicit binding get lost?
Implicit binding uses the object context before the dot, while explicit binding uses call/apply/bind to set this. Implicit binding is lost when a method is passed as a callback or assigned to a variable.
Implicit binding relies on the object that the method is called on (obj.method()), setting this to that object. Explicit binding uses call, apply, or bind to manually specify this. Implicit binding is lost when a method is extracted from its object, e.g., const fn = obj.method; fn(); — now it's a standalone function, and default binding applies. Example: const obj = { name: 'Test', log() { console.log(this.name); } }; const fn = obj.log; fn(); // undefined (implicit binding lost).
Scenario Questions
0-2 years experience
- 1You have an object `user` with a method `login` that uses `this`. If you write `const loginFn = user.login;` and later call `loginFn()`, what will `this` be inside `loginFn` and why?
- 2Write a short snippet that uses `call` to invoke a function `show` with a specific object as its this value.
- 3If you pass an object's method directly to `Array.map`, what happens to the implicit binding and how would you fix it?
2-5 years experience
- 1Your team added a utility function that relies on `this` and called it with `items.forEach(utilFn)`. The function now throws because this is undefined. Walk me through how you'd debug and resolve the issue.
- 2We refactored a component to extract an event handler into a separate module, and clicking a button no longer updates state. Explain how implicit binding could be lost and what explicit binding options you have.
- 3A function that uses `this` is passed to `setTimeout` and doesn't behave as expected. Why does this happen and how would you modify the code?
5-8 years experience
- 1Our front‑end library mixes regular functions and arrow functions for component methods. Discuss the trade‑offs of using explicit `bind` versus arrow functions to preserve `this` in a reusable UI component.
- 2Design a generic event dispatcher that lets listeners register with a specific context. Explain how you'd handle implicit binding loss when invoking those listeners.
- 3When migrating legacy code that heavily relies on implicit `this` binding to a TypeScript codebase, what strategies would you use to avoid bugs caused by lost binding?
8+ years experience
- 1Our organization is moving to a framework that favors functional components and hooks, eliminating class‑based components. How would you plan the migration of existing class components that depend on implicit `this` binding while ensuring minimal runtime regressions?
- 2Propose a linting rule or build‑time check that catches patterns where implicit binding is likely to be lost (e.g., passing methods as callbacks). Explain how it would integrate into CI and its impact on cross‑team code quality.
Follow-up Questions
- What would change if you used an arrow function for that method?
- How does strict mode affect the default this value when binding is lost?
- Can you think of a scenario where explicit binding might introduce a memory leak?