Explain the 5 rules that determine the value of this in JavaScript. Walk through each with an example.
The 5 rules for determining 'this' in JavaScript are: Default Binding (global/undefined), Implicit Binding (object context), Explicit Binding (call/apply/bind), 'new' Binding (constructor), and Arrow Function Binding (lexical scoping).
Default Binding: When a function is called standalone, this defaults to the global object (window in browsers, global in Node.js) in non-strict mode, or undefined in strict mode. Example: function show() { console.log(this); } show(); // global object or undefined.
Implicit Binding: When a function is called as a method on an object, this refers to the object the method is called on. Example: const obj = { name: 'Alice', greet() { console.log(this.name); } }; obj.greet(); // 'Alice'.
Explicit Binding: Using call, apply, or bind to directly set this. Example: function greet() { console.log(this.name); } greet.call({ name: 'Bob' }); // 'Bob'.
new Binding: When a function is called with the new keyword, this binds to the newly created object. Example: function Person(name) { this.name = name; } const p = new Person('Charlie'); console.log(p.name); // 'Charlie'.
Arrow Function Binding: Arrow functions do not have their own this; they inherit this from their enclosing lexical scope. Example: const obj = { name: 'Dave', greet: () => { console.log(this.name); } }; obj.greet(); // undefined (inherits from outer scope, likely window/global).
Scenario Questions
0-2 years experience
- 1If you call a plain function like `function foo() { console.log(this); } foo();` what will be logged and why?
- 2When you invoke `obj.method()` where `method` is defined as `function() { console.log(this); }`, what does this refer to?
- 3Show how using `foo.call(bar)` changes the value of this inside `foo`.
2-5 years experience
- 1In a React class component, a click handler defined as `handleClick() { console.log(this); }` loses its this when passed to a button. Walk through why that happens and how you would fix it.
- 2You have a Node.js module that returns a function: `module.exports = function() { return function() { console.log(this); }; };`. When the inner function runs, this is undefined. Explain the rule causing this and how to bind it correctly.
- 3Why does using an arrow function inside `setTimeout(() => { console.log(this); }, 0)` give a different this than using a regular function, and which rule applies?
5-8 years experience
- 1You are building a utility library that supports both method chaining (`obj.chain().next()`) and standalone function calls. How would you design the API to ensure this is bound correctly in each usage pattern?
- 2When refactoring a large codebase to replace many traditional functions with arrow functions, what edge cases around this should you watch for to avoid subtle bugs?
- 3If you bind a method with `fn = obj.method.bind(obj)` inside a high‑frequency event loop, what are the performance considerations and are there alternatives?
8+ years experience
- 1Your organization is migrating a legacy front‑end that heavily relies on dynamic this binding to a more functional style. Outline a migration plan that minimizes regression risk related to this.
- 2In a micro‑frontend architecture, shared UI components may be rendered in different host applications. How would you guarantee correct this binding without leaking state between hosts?
- 3What long‑term coding guidelines would you establish across multiple teams to prevent this‑related bugs, especially when mixing class methods, arrow functions, and higher‑order functions?
Follow-up Questions
- How does explicit binding interact with the new operator?
- What are common bugs when an arrow function is used as an object method?
- Can you describe a testing strategy to verify correct this binding in a module?