If “this” scares you, do not worry! We will learn how to determine the value of the “this” keyword using five simple rules.
Those five simple rules are as follows:
- The Regular One — Default binding
- Function Inside an Object — Implicit binding
- Function Borrowing — Explicit binding
- Using Function to Create Objects — New binding
- How Arrow Function Differs from the Regular Ones— Lexical binding
Don’t worry about these scary names. Computer Science people have a fancy for naming terms so that they sound extra-terrestrial. Under the hood, they are just common concepts that any willing human can understand.
The “this” variable corresponds to how you invoke a function. These rules help us to determine the value of this in various scenarios.
Once you understand these rules, then you would not fear them anymore.
Before we begin, please go through this article to understand how this works.
When calling a function in a standard way shown above, “this” will actually refer to the global object!
In the browser, the global object means the Window object.
One exception to remember — that is when strict mode is enabled. By writing “use-strict” you can prevent anything from being declared on the global object.
If the function is contained within an object, then that object will be referenced by “this”.
For the above, the
this keyword will point to the
We saw how
this points to the global object and in another case, it points to the object which contains it. Wouldn’t it be nice to able to control what this variable ends up being when the function is called?
Words like call, apply, and bind usually causes terror in new developers. In reality, they are all functions that can be used to explicitly set the value of “this”.
Suppose we have two objects, let us say
Both the object has a name property. The
personObj has a function that can print the value inside the
name but, the
readerObj does not have any such feature!
Here we can make use of one of the three methods —
This process is called function borrowing.
We borrowed the
sayName method for the
Now we can print the name property that is in
We are calling the
sayName method from
sayName method should point to
sayName function does not point to the
personObj but it points to the
Does that make sense?
Not just that — we can also pass some arguments when we use the
We passed Namaste as an argument
We can make use of the argument in the
When we execute the code, we will get the output along with the passed argument.
The apply method works the same way, but instead of regular arguments, it takes an array as an argument.
The bind method also works the same way — it can accept a regular argument.
But unlike call and apply — bind returns a function — that function can be stored in a variable and can be executed in the future.
One can see the use of bind in function currying — a topic that we will cover in the future.
We use the new keyword to create an instance or copy of an object. What the new keyword does is:
- It creates an empty object and then instructs the keyword this to point to that empty object.
- It then adds a
return thisstatement to the end of that function.
Remember, when an instance of an object gets created using the new keyword, “this” always points to that newly created instance.
When we run this code, what are we supposed to get?
As we said — an empty object!
What is happening under the hood is
What? Are we invoking the function?
See, I told you it is getting invoked.
Let us look at the whole thing.
If we put some value in the function, it will put that in the newly created object and then return it!
Let us finish this concept with an animation.
dev.to supports animation of 500 frames only, I am attaching an external link to the animation
Go here for the animation
In the above example, we are using a function to create an object.
This type of function is known as a function constructor.
Remember, in the
newPersonObj, which stores the copy of
personObj— the “this" variable points to empty
Does it make sense now?
Good! Let us now understand the last rule.
With the advent of ES6 — we got arrow functions. Arrow functions with their ultra-lean syntax are a natural replacement for their traditional anonymous counterparts.
To explicitly invoke an arrow function, as with a regular anonymous function, you would assign it to a variable first:
Arrow functions are just like regular anonymous functions, with one major exception- the behavior of this object inside the function.
In a regular function, the value of "
this" is context-based- call the function inside a link, and "
this" points to the link's object; call it inside one more function like
setInterval(), then "
this" points to the global window object.
For example, the following example attempts to call the
start() method of a custom object to increment its counter property by 1 every second, though it fails due to an incorrect assumption of the "
this" object reference counter.
In the above,
this.counter fails to properly reference the counter property of the
countup object, though the error may not be so obvious to spot. One can either mistakenly or carelessly assume that "
this" points to the
countup object, when in fact it points to the global
window object due to the context "
this" is being called- inside the global window method
The result is a reference to a non-existent
window.counter property that will repeatedly return
NaN when we try to increment it. To properly reference the
countup object then inside the anonymous function, we should cache a reference to the correct "
this" object before the context changes to a different one:
this" object inside an arrow function is lexically bound, which is just a fancy way of saying its value is static and determined by the place where the “
this" keyword is defined.
Contrast that with regular functions, where "
this" is dynamic and based on the context it's called regardless of the scope at the time "
this" was defined.
Let’s take the previous example that gave us trouble initially, and see how changing over to using an arrow function intuitively addresses the problem:
We solved the problem by just using an arrow function.
In this article we learned:
- When calling a function in a standard way shown above, “this” will actually refer to the global object!
- If the function is contained within an object, then “this” will point to that object.
- new keyword or operator when used makes an empty object, then instructs “this” to point to that newly created object
- Arrow function enables us to lexically bind the “this” keyword in the program, what this means is its value is static and determined by the place where the “
this" keyword is defined.
I wanted to take this last opportunity to say thank you.
Thank you for being here! I would not be able to do what I do without people like you who follow along and take that leap of faith to read my post.
I hope you’ll join me in my future blog post and stick around because I think we have something great here. And I hope that I will be able to help you along in your career for many more years to come!
See you next time. Bye!