JavaScript · this · Senior · Comparison
Compare `this` binding for class prototype methods vs arrow class fields used as callbacks.
Short Interview Answer
Prototype methods are shared and get `this` from the call site; arrow fields close over the instance `this` and are recreated per instance.
Detailed Explanation
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.
Interview Tip
Quantify: 'thousands of rows with arrow handlers' is a real memory concern.
Common Mistake
Ignoring allocation cost of per-instance arrows in hot lists.