DEV Community

Cover image for What is "This"? a JavaScript Explanation
Maximiliano Hernández Betancourt
Maximiliano Hernández Betancourt

Posted on

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! 😉

Top comments (5)

Collapse
 
pentacular profile image
pentacular • Edited

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.

The object isn't executing anything. There is no belonging.

This is an parameter that is used to access a context object that was passed to the function (either implicitly or explicitly).

Consider the following.

let x = { name: 'x' };

function foo () {
  this.name = 'y';
}

foo.call(x);

console.log(x);
Enter fullscreen mode Exit fullscreen mode

In this example it should be fairly clear what is going on, and why there is no magic here.

x is just passed to foo as its 'this' context.

foo is not a method of x.
x is not executing foo.

It's just another argument.

Collapse
 
hdezmax profile image
Maximiliano Hernández Betancourt

Thanks for exposing your thoughts on the article!

When I tell that "It's simpler to think of this as the reference to the object that is executing that block of code", I'm trying to give an intuitive definition of the behavior of this when is implicitly passed.

In your example above, you are explicitly passing x as the reference for this. So, the definition I gave doesn't apply to this case.

If you didn't indicate what object this should refer, it will reference the window object:

example

Using the definition I gave, you could think of this behavior as: the window object is executing the function foo(), so this will refer to window.

You are right, this is a parameter that you can use to access the context object. I thought it will be easier for beginners to use a non-technical definition when this is implicitly passed.

Collapse
 
pentacular profile image
pentacular

What I like about starting with the foo.call(x) example is that it immediately drains all of the magic.

There are no methods in javascript, functions do not belong to classes.

There are just functions which are invoked with some object as their 'this' context.

Having understood this, you can then move on to a.b(c) and show that it's equivalent to a.b.call(a, c).

Thread Thread
 
hdezmax profile image
Maximiliano Hernández Betancourt

I had not thought of it that way, I appreciate your reflection on the subject and I will consider it for future articles.

Thank you! :D

Thread Thread
 
pentacular profile image
pentacular

You are welcome. :)