How would you explain the this keyword to a junior developer in one analogy?
Think of this as a sticky note that says 'my current owner.' The owner changes depending on how the function is called: the object before the dot, the object created by new, or whatever you explicitly set with call/apply/bind.
Imagine a name tag that says 'Owner: ______'. When you call a function as a method on an object (obj.sayHi()), the tag gets filled with that object's name. When you call a function alone (sayHi()), the tag might be blank (undefined) or default to the global name tag, depending on rules. With bind, you can permanently write a name on the tag. With call or apply, you can temporarily hand the tag to someone else. Arrow functions, however, don't get their own tag; they just look at the tag of the person standing next to them (their lexical scope).
Scenario Questions
0-2 years experience
- 1You have an object `const user = { name: 'Ada', greet() { console.log(this.name); } };`. How would you call `greet` so that it logs the name correctly?
- 2If you attach a plain function as an event listener on a button, what will `this` refer to inside that function when the click fires?
- 3What will `console.log(this)` output inside a function that you invoke with `myFunc.call(null)` in strict mode?
2-5 years experience
- 1You pass a class method `this.handleClick` as a callback to `addEventListener` without binding it. Why does it break and how would you fix it?
- 2In a React class component you bind a method in the constructor. Explain why the binding is needed and what would happen if you omitted it.
- 3You refactor a regular function that uses `this` into an arrow function and notice its behavior changes. What trade‑offs are you making?
5-8 years experience
- 1Design a chainable API (e.g., `builder.setA().setB().build()`) ensuring each method’s `this` always refers to the same builder instance, even when methods are extracted and called separately.
- 2Your large codebase has many functions that rely on implicit `this` and now break when used with `apply`. Propose a migration plan to make the codebase more robust.
- 3A Node.js module exports a function that accesses configuration via `this.config`. Discuss the pitfalls when the module is required in different contexts and how you would restructure it.
8+ years experience
- 1Your organization is migrating from prototype‑based objects to ES6 classes and modules. How would you orchestrate the transition of `this` usage across multiple services while keeping runtime errors low?
- 2You need to enforce correct `this` binding in a monorepo. Sketch a lint rule or TypeScript utility to catch improper usage and discuss its maintenance implications.
- 3In a micro‑frontend architecture each micro‑app may have its own global `this`. How would you isolate or standardize `this` handling to prevent cross‑app conflicts?
Follow-up Questions
- Can you write a short snippet that demonstrates the difference between a regular function and an arrow function regarding this?
- What edge cases should we watch for when using this in asynchronous code?
- How would you test that a component correctly preserves its this binding?