The this keyword is an extremely important concept to understand in Javascript ,and many beginners, like me, find it difficult to understand.
this keyword/variable is a special variable that is created for every execution context(the 'environment' a function executes in).
So what is stored in 'this' keyword ?
In General terms , the this keyword will always take the value of the owner of the function in which the 'this' keyword is used.
or we can say that it points to the owner of the function.
Which means the value of this keyword is not static, it depends on how the function is actually called, and its value is only assigned when the function is actually called.
let's analyze different ways in which function can be called
1. As a Method
means as a function attached to an object.
When we call a method, the this keyword inside that method will simply point to the object in which the method is called. Or in other words, it points to the object
that is calling the method.
Ex.
const shashank = {
name : 'shashank',
year : 1998,
findAge: function (){
console.log(this) // this = shashank object
return 2022 - this.year;
}
}
shashank.findAge(); // 24
here the value of this
keyword inside findAge
method is shashank
object
, because shashank
object is calling this method.
2. Simple Function Call
means not as a method
& not attached to any object
.
In this case the this
keyword will be undefined
(Only in Strict Mode),
if you're not using 'strict mode'
( which you should not be doing), the this
keyword will simply point to global
object - meaning the window
object,
(another good reason to use 'strict mode'
)
function findUserAge () {
console.log(this)
}
findUserAge();
the reason for getting undefined
in second line is because function findUserAge()
is not returning any value,
'use strict'
function findUserAge () {
console.log(this)
}
findUserAge();
the reason for getting two undefined
is because we are using strict mode so this
is undefined
and in second line its because function findUserAge()
is not returning any value,
3. Arrow Function.
Arrow function do not get their own this
keyword , if you use this
in an arrow function it will simply be the this
keyword of the surrounding function ( or parent function
)
In technical terms this is called the lexical this keyword
because it simply gets picked up from the outer lexical scope of the arrow function.
const shashank = {
name : 'shashank',
year : 1998,
findAge: () => {
console.log(this) // Window object
return 2022 - this.year;
}
}
shashank.findAge(); // NaN ( Not a Number)
4. Function is called as an Event Listener
Then the this
keyword will always point to the DOM element , that the handler function is attached to
What is Not the this
keyword
this
does not point to the function itself and also not the variable environment of the function
There are also some other ways to call a function using call
apply
& bind
method, calling the function using these three methods is called explicit binding
.
Summary
Method |
this = Object that is calling the method |
Simple Function Call | in strict mode this = undefined, otherwise this = window object |
Arrow Function |
this = surrounding of function , also called lexical this |
Event Listener | DOM element , where the handler is attached |
Top comments (0)