Question 1

How is the value of this determined in JavaScript?

Accepted Answer

this is set by the call site (how the function is invoked), not where it was defined — except arrows, which inherit this lexically. Rules of thumb: default binding — plain fn() uses undefined in strict mode / global object in sloppy mode; implicit binding — obj.fn() sets this to obj; explicit binding — call/apply/bind set this; new binding — new Fn() sets this to the created instance. Arrow functions do not have their own this; they close over the surrounding this. Losing a method reference (const f = obj.fn; f()) drops implicit binding. Understanding call-site rules is essential for debugging.

Question 2

What are the differences between call, apply, and bind?

Accepted Answer

call and apply invoke immediately with a chosen this (args list vs array); bind returns a new function with bound this/args. fn.call(thisArg, a, b) invokes fn with this set to thisArg and individual arguments. fn.apply(thisArg, [a, b]) is the same but takes an array-like args list — useful for variadic forwarding before rest/spread. fn.bind(thisArg, a) returns a bound function that, when later called, uses that this (and partial args). Bound functions cannot be re-bound for this (though you can still wrap them). With new, a bound function's bound this is ignored in favor of the new instance (exotic bound function behavior).

Question 3

When should you use an arrow function vs a regular method regarding this?

Accepted Answer

Use arrows to preserve outer this (callbacks); use regular functions/methods when you want this set by the receiver or new. Arrow functions shine as callbacks inside methods/constructors where you need the enclosing this (this.setState style). They cannot be used as constructors and have no arguments object (use rest). Object methods that should use the calling object as this should be regular methods — an arrow as an object literal method would capture the outer this (often undefined/global), which is usually wrong. Class fields as arrows bind per instance (convenient for React) but cost memory vs prototype methods.

Question 4

What is logged in strict mode?

Accepted Answer

10 then a TypeError (or undefined access failure) because g() has default this of undefined. obj.getX() uses implicit binding, so this is obj and returns 10. Assigning const g = obj.getX passes the bare function; calling g() uses default binding. In strict mode (and ES modules), this is undefined, so this.x throws TypeError. Fixes: g.call(obj), obj.getX.bind(obj), or wrap () => obj.getX(). This demonstrates why passing methods as callbacks often breaks.

Question 5

Compare this binding for class prototype methods vs arrow class fields used as callbacks.

Accepted Answer

Prototype methods are shared and get this from the call site; arrow fields close over the instance this and are recreated per instance. A method on Class.prototype is one shared function; extracting it loses this unless bound. An instance arrow field (handle = () => { this... }) lexically captures the instance, so passing this.handle to addEventListener works without bind. Cost: each instance allocates its own function property, which increases memory and can affect test spies/super patterns. Binding in the constructor (this.handle = this.handle.bind(this)) is a middle ground. Choose based on call frequency, instance count, and whether subclassing needs prototype overridability.

Question 6

You wrap third-party methods with a Proxy or logging decorator. What this-related pitfalls should you design for?

Accepted Answer

Forwarding traps must preserve the original receiver; naive wrappers can break methods that rely on this or brand checks. If you intercept get and return a wrapped function that calls target[prop](...args) without .apply(receiver), this may become wrong. Using Reflect.get/Reflect.apply with the correct receiver preserves invariants. Some APIs use brand checks (this must be a true Array/Map). Bound methods and getters that return functions complicate wrapping. At lead level: define whether wrappers are transparent, document breakage on exotic objects, prefer higher-order wrapping at export boundaries, and add tests for method extraction and inheritance. Also consider that arrows inside the target won't care about your receiver — lexical this ignores Proxy receiver tricks.

this JavaScript Interview Questions

Other JavaScript interview topics