One article seems to be too short to cover the awesomeness of this
so we will discuss this
in two-part series.
As confusing as this
in JavaScript can be, it is an important concept in JavaScript that every JS developer should know.
this
provides the foundation for Object-Oriented in JavaScript.
I am not a pro but I will try my best to explain what I have understood about this
.
Objective
- Define what the keyword
this
in JavaScript - Understand the four rules to figure out the value of
this
So what is this
?
this
is a reserved keyword in JavaScript which simply refers to the object it currently belongs to. The value of this
is set on the execution context, usually determined by how a function is called so the value of this
change during execution.
Four Rules of this
The value of this
can be determined using one of the following rules.
(These are not an official rule, just something I learned from awesome developers our there)
- Global Context Rule
- Object or Implicit Rule
- Explicit Rule (call, bind and apply)
-
new
Rule (new
keyword in JavaScript)
1. Global Context Rule
Reminder: this
points to the object it currently belongs to.
When this
is not inside any declared object, then this
points to the window
objec.
Every variable declared in the global scope is attached to the window
object.
Basically ,in browser,
let name = 'blank';
is same as
window.name = 'blank';
Let's look at the value of this
in our browser.
console.log(this); // Window{...}, window object
Here this
points to the window
object because this
is inside the window
object.
We can verify if this
is really pointing to the window
object.
this === window; // true
As we can see, this
is equal to the window
object.
Now let's look at the value of this
inside a function.
function whatIsThis() {
return this;
}
whatIsThis(); // Window { ... }, Window Object
Even though we have called this
inside a function, this
is still inside the window
object so it still points to the window
object.
Let's look at another example.
function variableInThis() {
this.person = 'blank';
}
// calling our function
variableInThis();
// let's check the value of `person` variable
console.log(person); // 'blank'
console.log(Window.person); // 'blank'
All in all, this
points to the window
object because this
belongs to the window
object and any variable we globally create is a property attached to the window
object.
2. Object or Implicit Rule
Reminder: this
points to the object it currently belongs to.
Or we can also say it points to it's closest object.
When we declare an object implicitly, then this
inside that object points to that object, and not the window
object.
let person = {
firstName: 'blank',
sayHi: function() {
return `Hi ${this.firstName}!`;
},
determineContext: function() {
return this === person;
},
whatIsThis: function() {
return this;
}
};
person.sayHi() // 'Hi blank'
Here we implicitly declare an object, so this
inside the person
object points to the person
object itself and not the window
object.
Meaning, inside the person
object, doing
...
return `Hi ${this.firstName}`;
...
is same as doing
...
return `Hi ${person.firstName}`;
...
Let's see the value of this
inside the person
object
whatIsThis() // {firstName: "blank" ... }
person.determineContext(); // true
We can see that person
=== this
is true so we can confidently say that this
is pointing to the person
object. (and not the window
object.)
Now let's look at a nested object and find the value of this
inside the inner object.
Reminder Again: this
points to the object it currently belongs to.
var person = {
firstName: 'blank',
sayHi: function() {
return 'Hi ' + this.firstName;
},
determineContext: function() {
return this === person;
},
language: {
javaScript: function() {
return `${this.firstName} likes JavaScript!`;
},
determineContext: function() {
return this === person;
},
thisInLanguageObject: function() {
return this;
}
}
};
person.determineContext(); // true
Inside person
object, the value of this
is pointing to the Person
object because that's what this
do.
Now let's look inside the language
object for the value of this
person.language.javaScript(); // "undefined likes JavaScript!"
Inside the language
object, there's no firstName
property, so this.firstName
is undefined.
Q. Does this.firstName
=== language.firstName
inside the language
object?
Moving on, let's look at the value of this
inside the language
object.
person.language.determineContext(); // false
We can be sure that this
inside the language
object is not pointing to the person
object.
So let's see what is the value of this
person.language.thisInLanguageObject();
// {javaScript: ƒ, determineContext: ƒ, thisInLanguageObject: ƒ}
Let's Wrap UP
-
this
points the current object it belongs to - if
this
is in global context thenthis
points to thewindow
object - if
this
is in the declared object thenthis
points to that declared object
And this
concludes our first two rules.
In the next part, we will see how call
, apply
and bind
works with this
and also talk about new
keyword in JavaScript.
Top comments (0)