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
- 1
If you call a plain function like
function foo() { console.log(this); } foo();what will be logged and why? - 2
When you invoke
obj.method()wheremethodis defined asfunction() { console.log(this); }, what does this refer to? - 3
Show how using
foo.call(bar)changes the value of this insidefoo.
- 1
In 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. - 2
You 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. - 3
Why does using an arrow function inside
setTimeout(() => { console.log(this); }, 0)give a different this than using a regular function, and which rule applies?
- 1
You 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? - 2
When 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?
- 3
If 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?
- 1
Your 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.
- 2
In 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?
- 3
What 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?