JavaScript ‘this’ Keyword


In this article, we are going to learn what is javascript ‘this’ keyword. We gonna take a deep understanding of it and take a few examples that clear your confusion about ‘this’ keyword. The this keyword is one of the most widely used and yet confusing keywords in JavaScript. Here, you will learn everything about this keyword. Most beginners use this keyword in their program but don’t know the actual use of it. They don’t know what is the benefit of using this keyword in a simple or complex program. 

Understanding this is absolutely imperative in order to understand more advanced concepts in JavaScript or to read and write JavaScript code, which is why we shall spend this article trying to clarify what this really means in JavaScript.

'this' keyword

So let me explain what is this keyword and why we use it to simplify the work. So the first question comes in what is this keyword.

What is ‘this’ keyword?

What if I say, you are using this keyword since childhood. You use this keyword many times. So let me explain where did you use it. When you were in school, you would take your mother or father to meet the school teacher and suddenly someone asks you, who’s this? You answer him a very polite manner, this is my father. So did you notice we use this keyword to refer to our father?

We used this keyword to show the reference for our parents. The same way javascript uses this keyword. It uses this keyword to refer to its’ parents. this points to a particular object.

So we will take a very small example to understand this keyword. I hope this example will clear your doubts.

Example

In the above code, we have created object parents. This object includes several properties. So we have a father’s name, child name, and father function. This function returns the name of the father if someone asks a child who is this? (As we have seen in the previous childhood example).

Now if you call console with father function. You will get a simple message “This is my father”. So here this is referring to your parents. So what if we use this keyword to tell your father’s name. 

Let’s try it.

So in this simple sentence, we have just changed the return statement of the father method. Now here this is referred to the parents object. It means this function simply describe who is your father. The output should be as expected. So in this example, we use this keyword to refer to the parent. It means we use this keyword to refers to its parent object.

Depending on its use, this keyword has different values.

 

In Method

In this example, we use this keyword in a method. So that is why this refers to its parent object.

 

Global Use

If you use this keyword globally it refers to the global object. For example, if you use this keyword in a javascript file that links to the HTML using the script tag. When used alone, the owner is the Global object, so this refers to the Global object.

In strict mode, when used alone, this also refers to the Global object

So, if ‘this’ is used inside any global function and called without dot notation or using window. then this will refer to a global object which is the default window object.

In Function

If you use this keyword in a function it refers to the global object. In a JavaScript function, the owner of the function is the default binding for this

JavaScript strict mode does not allow default binding. In the above example, a function parent() is being called from the global scope. The global scope means in the context of the window object. We can optionally call it like window.parent(). So in the above example, this keyword in parent() function will refer to the window object.

So, when used in a function, in strict mode, this is undefined

 

In event Handler

In HTML event handlers, this refers to the HTML element that received the event.  This keyword is also can be useful to work with events. In events this is referred to as an element.

Now if you execute this example you will get an element. Once you know that how to and where to use ‘this’ keyword let’s take a very simple example to understand it more deeper.

Simple Example

Now when you execute this example you will get “BMW” on the console because ‘this’ keyword refers to the window object. Now, what if we change the object.

Now if you take a look at your console you will get “Audi” because at this time ‘this’ keyword refers to the obj1 object.

If you execute the example, you will get “Tesla” on the console. this points to obj1 for obj1 instance and points to obj2 for obj2 instance. In JavaScript, properties can be attached to an object dynamically using dot notation.

So we just have changed the reference of this keyword to change the value of the name property.

So that’s it. I hope you understand what is ‘this’ keyword is all about. If you have any question ask me any time in the comment box. Share this post with your friends. That is all for now I will see you in the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *