I'm having trouble understanding the "this" keyword
What does the course mean by “this” will refer to whichever object called that method.
Answer 5411086e631fe9f27d0005d8
Hi Chad, good question!
First we need to know that this is a placeholder.
A placeholder is something take reserves a seat for something else.
An example of a place holder in the English language is him or her, like when we refer to John’s computer we may say “it belongs to him!” We could replace him by John and it would be “It belongs to John!”
So him takes place of John and we humans translate him as John.
The same goes for this in JavaScript.
As an example, when we normally declare a variable we are working inside of an object called window. window is the browser page and everything is created inside of the window object, like for example:
var x = 33;
The real full path for x is actually
window.x = 33;
Since this takes the place of the object that owns the variable we could also write like this:
this.x = 33;
So in a sense, x, or window.x or this.x all mean the same x.
It is like saying him or John, both refer to John.
When do we use this?
We use this when there is possible ambiguity. this will specifically tell JavaScript which variable we are referring to.
Example
var x = 33;
function test(){
var x = 7;
return x;
}
Which x is going to be returned? 33 or 7?
The answer is 7. That’s because when we call the function JavaScript starts from the inside of the function first and grabs the closest x it finds.
What if instead of 7 we really wanted 33?
Well, that’s when this comes handy: var x = 33;
function test(){
var x = 7;
return this.x;
}
Now when we call the function it returns 33 instead of 7. That’s because we have instructed JavaScript to specifically return the x that belongs to the object that owns the script which is window and therefore the outer x.
And just to be sure we understand, we could have also written it like this: var x = 33;
function test(){
var x = 7;
return window.x;
}
Hope it helps.
3 comments
This is a really good explanation.
Thank you for this. I’m trying to wrap my head around “this” and so far your explanation has made some sense of it. Am I right to say that from your explanation, “this” is always tied to it’s parent object, despite it’s use in a function? It will always refer to it’s parent, which by default is the global “window” object, but you can alter “this” by tying it to a different object?
Also if you can alter it by tying it to a new object, say in this exercise the object “bob,” will it never refer to “window” again unless you set it back to “window”?
Answer 5416e3b27c82cabb84003ea6
this
is just bob
. Or susan
. Or you
. Anything. It takes its place.
So this is just like a he or she. You replace ‘he’ or ‘she’ or ‘it’ by a name. She is Mary. That ‘She’ is this
.
Don’t worry about it. It’s just in case you no longer want bob, and want to change it to something else…basically. ;)
Popular free courses
- Free course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner Friendly4 Lessons - Free course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner Friendly11 Lessons - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly6 Lessons