Why should you care?

this shows up in classes, event handlers, and object methods — confusing this is a top beginner bug.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

const person = {
  name: "Lee",
  sayHi() {
    console.log("Hi, " + this.name);
  }
};
person.sayHi();

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• When you call person.sayHi(), this inside sayHi is person.
• If you copy sayHi to another variable, this may change.

Practice next

1. Run person.sayHi() and see correct name.
2. Copy sayHi to const fn = person.sayHi; fn() and see broken this.
3. Fix with fn.call(person) or bind.
4. Use call to invoke greet with a different object as this.
5. Add an event listener using a regular function and log this — it is the element.

Remember

this depends on call site Methods: this is the object before the dot arrow functions inherit this from outer scope

ScriptVerse button handlers

A class-based widget relies on this pointing to the instance when handleClick runs from addEventListener.

Outcome: Correct this binding prevents methods from reading undefined instance data.