How does this work in JavaScript?

For a normal function, look at the call site. The same function can have a different this depending on how it is invoked.

• obj.method() sets this to obj.
• A plain call such as fn() sets this to undefined in strict mode or modules, and to the global object in sloppy mode.
• fn.call(ctx) and fn.apply(ctx) set this explicitly.
• new Fn() sets this to the newly created object.
• An arrow function ignores all of the above and uses the this of the scope where it was written.

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

user.greet(); // "Asha"

const greet = user.greet;
greet(); // undefined in strict mode / modules

const bound = user.greet.bind(user);
bound(); // "Asha"

Arrow functions

const counter = {
  count: 0,
  start() {
    setTimeout(() => {
      this.count++;
      console.log(this.count);
    }, 100);
  },
};

counter.start(); // 1

This is why arrow functions are a poor choice for object methods or class methods that need the instance, but are a good choice for callbacks inside those methods.

Common mistakes

• Saying this refers to the function itself. It does not.
• Assuming an arrow function's this depends on where it is called.
• Losing this when passing a method as a callback without bind() or an arrow wrapper.