‘This’ in JavaScript

Hello everyone… I’m Sanjay. This is my first post, which is about ‘this’ in JavaScript :-) I thought of sharing this because ‘this’ concept is a little bit confusing one to understand in the beginning.

‘this’ is determined in three ways.

• In Object methods, it refers to the object that is executing the current function.
• In Regular function declaration, it refers to the window object.
• In Arrow functions, it refers to the context in which the code is defined.

‘this’ in Object methods:

In the above code snippet , “car” is an object. In the car object start is a property/key which has a function as its value . This function or method is called the object method since it is present inside an object. In the above example , ‘this’ refers to the “car” object as it’s executing the method “start”. The output will be the car object because the “car” is the one which is calling the method “start”.

‘this’ in Regular Functions (function declaration):

In the above example , “this” refers to the “window object”.

Window object :

The window object represents the open window in a browser. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object. Global functions are methods of the window object.

‘this’ in Arrow Functions :

In Arrow functions ‘this’ depends on two aspects:

1. When the code is defined.
2. Context. Arrow function inherits ‘this’ from the context in which the code is defined.

Here, the only change is we have used arrow function instead of function declaration. But the output is window object.

Let us find out how.

As we said before, in arrow functions we need to check two aspects.

1. When the code (arrow function) is defined ? ,The arrow function is defined by the time when the car object is created. (i.e) The arrow function is defined at the same moment when the car object is being created.
2. Context. The car object is created in the console, so the reference here is the window object.

So, coming to the conclusion, since the arrow function is related to the car object and the car object is related to the window object, ‘this’ will refer to the window object in this case.

Little deeper :

In this, we have used setTimeout inside the object method and used a callback which is an arrow function. This will print the car object as output. So we should apply the rules for the arrow function here.

1. When the code (arrow function) is defined ? , The arrow function is defined only when the start function is called (car.start()). Till then the arrow function is not defined.
2. Context. The arrow function is present inside the object method. In object method, ‘this’ will refer to the car object. So the arrow function inherited the context in which the code is defined.

So, coming to the conclusion, ‘this’ in the arrow function here will refer to the car object.

‘this’ in Constructor Functions :

In Constructor functions “this” refers to the instance object.

Here , car is a constructor function. Here start is an object method which is a function declaration. ‘this’ here refers to the car1 object.

Here , start is an object method, which is an arrow function. “this” still refers to the car object only.

Play around by logging “this” in the console with all the methods, so that you can get a clear idea about “this”.