Objects are referenced
Before jumping into ‘this’, we need to understand one thing about objects. When we create a variable with a primitive value, it creates a whole new value entirely. Let’s look at code to see what I mean.
In this example, we can see that a is a number, a type of primitive value. The b variable’s value becomes the value of a. When a changes its value, b stays the same. This is because primitive values are copied. They do not reference the original value.
In this example, we see that c’s value is a newly declared object. This new object has a property name whose value is “Bobby”. The d variable’s value becomes the c variable. When we change name on the object declared in c, it also changes the name property on d. This is because objects are referenced and not copied. d was referencing the same object that was declared on the c variable.
I encourage you to do these examples on your own so that you fully understand what is happening.
‘this’ is an object reference.
If there is only one thing you get from this article, let it be that the value of ‘this’ is a reference to an object. There will never be a case where ‘this’ will be something other than an object reference.
From this example, we see that the first ‘this’ is referencing the global window object, and the second ‘this’ is referencing the random object.
Does ‘this’ change based on what object it is inside?
No, it doesn’t. So if ‘this’ doesn’t reference the object it’s inside of, what does it reference?
function calls and ‘this’
Here is where people start to get confused. Every time a function is invoked, a brand new ‘this’ variable is created. In the last example, the ‘this’ in the objects are not in a function, which means it will still reference the global object. What happens if we create functions that log the ids?
Now we get what is expected. When we invoked the function, its new ‘this’ variable referenced a different object then the window.
If a new ‘this’ variable is created when a function is invoked, does ‘this’ reference the object where the function was declared?
If that was the case, 1 would have been logged every single time. It’s not where the function was declared that represents the ‘this’ value, but what object invokes the function. Since the first time getId was invoked was by the window, it logs window’s id property. firstObject invokes getId the second time, so it will log firstObject’s id.
Common scenarios with ‘this’
There are a few situations where ‘this’ is used often. Constructor Functions use it to create new objects.
When a function is run as a constructor with the new keyword, an object is created and ‘this’ references the new object. Just make sure that the new keyword is used or the properties with ‘this’ will be put on a different object.
Call and Apply method
There are a few function methods that use the power of ‘this’. The call and apply methods are used to invoke a function while changing the object ‘this’ is referencing.
From the example, we can see that by invoking describePet without call, ‘this’ is referencing the window object. When we invoke the function with call and pet as its argument, ‘this’ references pet. This is extremely useful, especially when using modules.
Though I did not make an example with apply, just know that it has the same functionality with ‘this’ that call does. You can find the differences between the two here.
The Bind method
Bind is also a function method that changes what object ‘this’ is referencing. The difference is that bind creates a new function that is not immediately invoked.
Every time greetMichael is invoked, ‘this’ will always reference person1. Bind is used often when dealing with event handlers such as click events.
Important concepts with ‘this’
If “use strict” is placed inside the scope of a function, ‘this’ will not reference the global object but will be undefined.
fat arrow functions
Fat arrow functions, a new function syntax created in ES6, made changes to how ‘this’ is used. Every time an arrow function is invoked, it does not create a ‘this’ variable. Therefore, ‘this’ will reference whatever the function’s lexical environment references.
Resources for more information on ‘this’
In order to use well, one must first understand well.