What is "This"? a JavaScript Explanation

We all have used this inside a function just to find out that it's not working as thought. Do you want to understand what happens? Let me explain it to you:

W3School defines this as "... The keyword that refers to the object it belongs to". Certainly, the definition is kind of confusing. Let's start by remembering that in JavaScript anything that is not a primitive type is an object. So, this is a keyword that you can use to refer to a particular object.

The tricky part is to know what object this belongs to. It's simpler to think of this as the reference to the object that is executing that block of code.

Standard Behavior of this

By default, this will refer to the global object. In frontend JavaScript, this object is the window. this will only change its reference in these two cases:

1. Inside a Method: it will reference to the owner object
   

   
     const person = {
           experience: 3,
           introduction: function() {
               return `I have ${this.experience} years of experience`      
           }
     }
   
     person.introduction() //I have 3 years of experience
   
   

   Note that in this example the function is executed as a method of the person object. If you execute it as a normal function, this will refer to the global object.
   

   
     const fn = person.introduction
     fn()  //I have undefined years of experience
   
   

2. Inside an Event Handler: it will reference the element that triggered it.
   

   
      foo.addEventListener('click', function (e) {
           this.style.color = "red"
           return
      });
   
   

This inside Arrow Functions

In all of the above examples, I only used regular functions, and there is a reason why: Arrow Functions are a compact alternative to a regular function, but they don't bind their own scope. This means that arrow functions inherit the reference of this, which in most cases it would be the global object.

So, in order to get the persona.introduction() working with Arrows Functions, we have to enclosure it inside a regular function:

const person = {
        experience: 3,
        introduction: function() {
            const introduction = () => `I have ${this.experience} years of experience`
            return introduction()       
        }
}

person.introduction() //I have 3 years of experience 

The Arrow Function is inheriting the reference of this from its father function, which is a regular function as a method of person.

Explicit Binding

You can explicitly indicate to a function the reference this should use. To achieve this, you can use the function's method .bind()

In the next example, I will execute the introduction() method of person indicating the reference that this will use.

const person = {
        experience: 3,
        introduction: function() {
            return `I have ${this.experience} years of experience`      
        }
}

const anotherPerson = {
        experience:7
}

const fn = person.introduction.bind(anotherPerson)
fn() //I have 7 years of experience

bind() will return a function bound with the object that you indicated. If you don't want a return, you can bind and execute with the methods call() and apply(). Like this:

person.introduction.call(anotherPerson) //I have 7 years of experience

The difference between call() and apply() is how you can pass in arguments. You may find more information on this topic on the JavaScript documentation of MDN.

Wrap-Up

• this references to the object that is executing the block of code.
• Arrow Functions inherit the reference of this.
• You can define what reference of this a function should use with the methods: bind(), call(), or apply().

Hope this post helped you understand something more about JavaScript.

Ask me any questions you have down on the comments section! 😉