The `this` Keyword – Binding Rules

How this is set depends on call site:

• Function call – this is undefined in strict mode, otherwise the global object.
• Method call – obj.method() → this is obj.
• Constructor (new) – this is the newly created object.
• Arrow function – this is lexically inherited from the surrounding scope.
• Event listeners – this points to the element the listener is attached to (unless an arrow function is used).

---

Example: Arrow vs normal function in an event listener

const btn = document.querySelector('button');
btn.addEventListener('click', function(){ console.log(this); }); // logs <button>
btn.addEventListener('click', () => { console.log(this); }); // logs Window (lexical this)