Lexical vs dynamic this, arrows revisited
See how dynamic this depends on call-site, and how arrow functions capture lexical this; use tiny, clear examples.
Big picture
Goal: Know when this points where.
- Dynamic this: decided by call-site
- Arrow this: captured lexically
- Common gotcha: method extraction loses this
- Use arrows to keep this inside callbacks
Dynamic this demo
Dynamic this: calling as obj.method() sets this = obj; extracting the function loses the object.
// Dynamic this depends on HOW we call the function
const person = {
name: "Ayla",
say: function () {
return "Hi " + this.name;
}
};
console.log("method call:", person.say()); // "Hi Ayla"
// Extract then call: this is lost
const talk = person.say;
console.log("extracted call:", talk()); // likely "Hi undefined" in strict mode -> this is undefined
All lessons in this course
- Lexical vs dynamic this, arrows revisited
- Method extraction gotchas, partial application
- Functional alternatives — pass context, closures, tiny helpers