this keyword is the most widely used keyword and still quite confusing for beginners.
this is called.
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
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 keyword has different value depending on where it is used:
- Alone or outside a function,
thisrefers to the global object.
- In function,
thisdepends on how the function is called however by default it refers to the global object.
- In normal function in strict mode,
- In a method,
thisrefers to an owner object.
- In an event,
thisrefers 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]).
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.
In strict mode,
this in function is
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
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
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
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
As you can see in the above example, when function 'info' is called normally then
this refers to global object while when called using
this refers to the passed object.
Binding this using bind() method
bind() method bind
this of another object and returns a new function.
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.