Understand this in JavaScript

Table of Contents

This in object method

Object method is just a function inside an object, so the this keyword in object method is the object itself,

example:

let user = {
  name: "John",
  greet: function () {
    console.log("Hello, my name is " + this.name); //  this = user
  },
};
user.greet(); // outputs "Hello, my name is John"

but also care about this case

let user = {
  name: "John",
  greet: function () {
    console.log("Hello, my name is " + this.name); //  this = user
    const innerFunc = function () {
      console.log("InnerFunc::Hello, my name is " + this.name); // this = window, output "InnerFunc::Hello, my name is undefined"
    };
    innerFunc();
  },
};

user.greet(); // "Hello, my name is John"

inside innerFunc, this is not user anymore, it's window object, because innerFunc is not a method of user object, it's just a function inside greet method, it's window object, and window.name is undefined

so, how to make this in innerFunc is user object? we can use some tricks like this

  1. use, call, apply, bind method
let user = {
  name: "John",
  greet: function () {
    console.log("Hello, my name is " + this.name); //  this = user
    const innerFunc = function () {
      console.log("InnerFunc::Hello, my name is " + this.name); // this = user, output "InnerFunc::Hello, my name is John"
    };
    innerFunc.bind(this)();
  },
};
user.greet(); // "Hello, my name is John"
  1. use arrow function
let user = {
  name: "John",
  greet: function () {
    console.log("Hello, my name is " + this.name); //  this = user
    const innerFunc = () => {
      console.log("InnerFunc::Hello, my name is " + this.name); // this = user, output "InnerFunc::Hello, my name is John"
    };
    innerFunc();
  },
};
user.greet(); // "Hello, my name is John"

In function, without strict mode

In function, without strict mode, this is window object, but in strict mode, this is undefined

example:

function greet() {
  console.log("Hello, my name is " + this.name); //  this = window
}
greet(); // "Hello, my name is undefined"

In function, with strict mode

In function, with strict mode, this is undefined

example:

function greet() {
  "use strict";
  console.log("Hello, my name is " + this.name); //  this = undefined
}
greet(); // "Hello, my name is undefined"

In arrow function

There are 2 cases of arrow function

  1. arrow function is in regular function (function declaration, function expression)
  2. arrow function is not in regular function

Arrow function is in regular function

In this case, this is this of regular function

example:

let obj = {
  name: "John",
  greet: function() {
    console.log("Hello, my name is " + this.name);  // outputs "Hello, my name is John"

    let arrowFunction = () => {
      console.log("Arrow function says: " + this.name);  // outputs "Arrow function says: John"
    };
    arrowFunction();
  }
};
obj.greet();

Arrow function is not in regular function

In this case, this is window object

example:

const test = () => {
  console.log(this); // this = window
};
test();

In class

In class, this is the instance of class

example:

class User {
  constructor() {
    this.name = "Maria"
  }
}
const user = new User();
console.log(user.name); // Maria

In event handler

In event handler, this is the element that trigger the event

example:

const el = document.getElementById('my-id');

el.addEventListener('click', function() {
  console.log(this === el); // true
});