In JavaScript, the this keyword depends on how a function is called, not where it’s written.

Object Method

➡️ this refers to the object before the dot → user

const user = {
  name: "Daniel",
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi();

Regular Function

• In non-strict mode → window.
• In strict mode → undefined

function show() {
  console.log(this);
}

show(); // window (browser) or undefined (strict mode)

Arrow Functions

• Arrow functions don’t have their own this.
• They use this from the surrounding scope.

const user = {
  name: "Daniel",
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi(); // undefined

➡️ this is NOT user here

Event Handlers

button.addEventListener("click", function () {
  console.log(this); // button element
});

➡️ this refers to the element that fired the event

call, apply, bind

They all let you manually control what this is when calling a function.

function greet() {
  console.log(this.name);
}

const user = { name: "Daniel" };

greet.call(user);  // Daniel
greet.apply(user); // Daniel

const bound = greet.bind(user);
bound();           // Daniel

Quick Summary