THIS IN JAVASCRIPT
Javascript this
keyword is the most widely used keyword and still quite confusing for beginners. this
points to a particular object in JavaScript and what is that object mostly depends on how a function which includes this
is called.
The function's this
keyword behaves a little differently in JavaScript than in other languages. Understanding this
very important to learn advanced concepts in JavaScript.

In this tutorial, you will understand this
keyword and its use in different cases in detail.
- What is this?
- this outside function (Global)
- this in function
- this in arrow function
- this in method
- this in event handler
- Refer this to desired object
What is this keyword in JavaScript?
Every javascript function has reference to the object which called the function, that reference is known as this
.
In JavaScript, the value of this
stores current execution context of the program so when this
is used inside a function then the value of this
is determined by how a function is called, which is a runtime binding of this
.
The this
keyword has different value depending on where it is used:
- Alone or outside a function,
this
refers to the global object. - In function,
this
depends on how the function is called however by default it refers to the global object. - In normal function in strict mode,
this
isundefined
. - In a method,
this
refers to an owner object. - In an event,
this
refers to an element that received the event.
this Outside function - Global context
this
used outside any function and object methods has a global scope and refers to the window object.
this
outside function refers to the global object even in strict mode.
Also in strict mode, this
outside the function refers to Global object ([object Window]).
this in JavaScript function
The value of this
inside a function depends on how the function is called.
this
in function by default refers to Global object ([object Window]) in non-strict mode.

this in JavaScript function - strict mode
In strict mode, this
in function is undefined
because in strict mode JavaScript does not allow default binding.
this in arrow function
Arrow function doesn't have their own this
. It takes the reference to this from outer normal function.
In global code, this
in arrow function refers to the global object.
Let's see an example to understand.
The 'name' is a global and a local variable in the object. When arrow function uses this
in 'showName' function then it refers to outer scope (Global) which is 'John' and when the 'fxn' run then it take reference of this
from the outer normal function which is 'sayHi'.
this in a Method
this
in an object method refers to that object.
You can use this
within an object method to represent object and object entities.
this in Event Handler
this
in a function which is used as an event handler for an event refers to the element which receives the event.
It is recommended to use addEventListener()
method to set the event handler because some browser does not allow this convention.
Here in the example below, we set an event listener function using the addEventListener
method. When you use this
in the event handler function then it points to the element which receives the event.
this in inline event handler
Also in the inline event handler, this
refers to the element which receives the event.
this in event handler attached using HTML attribute
You saw in the above example that when the event handler is added to the element using addEventHandler
method then this
represents the element itself however when you add event listener using HTML attribute then this
in the function does not represent the element but it represents the Global object.
See in the example below.
But, if you want to use this
which points to the element in this case then pass this
as an argument in the function and use it in the event handler.
Refer this to desired object
As you have seen as far that a function's this
refers to a global object but you can make to refer to a specific object for a certain call or for always.
You may be knowing about the call()
, apply()
and bind()
. Using these 3 method you can set the context of this
inside a function irrespective of whether that function is being called in the global scope or as an object's method.
Let's see in detail with example.
Set this using call and apply method
The call
and apply
method executes the function immediately after setting this
of another object to the function.
To set the desired this
, pass the reference of this
as the 1st parameter in the call
and apply
method and pass functions parameter and next you can pass the arguments of the function.
The only difference between the call
and the apply
is that function's argument is passed individually in call
method but passed as an array in apply
method.
As you can see in the above example, when function 'info' is called normally then this
refers to global object while when called using call
and apply
its this
refers to the passed object.
Binding this using bind() method
bind()
method bind this
of another object and returns a new function.
Unlike call
and apply
methods, bind
does not invoke immediately, you can call it later which makes it suitable to be used as callback functions.
As you can see in the above example, the bind method binds another object to 'intro' function and return a new function which you can store to some variable or invoke directly.