Closure CavesISSUE #9 of 61

this · what it points to

LambdaVSThe Mutator

Lambda saysthis refers to the calling context — and what it points to depends on how a function is called.

this is dynamic: in a method call (obj.fn()) it's obj; called plain, it's undefined (strict) or the global object. Arrow functions don't bind their own this — they inherit it. Most "this is wrong" bugs come from passing a method as a callback and losing its context.

Power-ups you unlock

this depends on HOW a function is called
obj.fn() → this is obj
Plain call → undefined (strict) / global
Arrows inherit this from their scope

The Mutator attacks — common mistakes

Passing obj.method as a callback and losing this
Using a regular function where an arrow keeps this
Assuming this is lexical for normal functions

Boss battleShow this inside an object method, then break it by extracting the method to a variable.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>const obj={name:'drew', hi(){ return 'hi '+this.name; }};
document.getElementById('o').textContent=obj.hi();</script></body></html>

▶ Open the interactive comic issue

‹ Recursion · Function Calls Itself Call · Apply · Bind · Changing This ›