First off, a note: I was planning on create a thread like this for ages, but I have been putting it off for one simple reason: just like a lot of people, I too didn't quite get the "this" keyword. It still baffles me a bit but hopefully this basic walkthrough will make sense.
"this" is basically a label. It's a label you put on a function to show who it belongs to. Sort of like putting a label on your food at work saying "THIS SANDWICH BELONGS TO <your name>"
So what do I mean by "belongs"? Well, take a look at this code which shows a function defined within another function:
function doSomeStuff(){
return {
doSomeRelatedStuff: function(){
}
}
}
function doSomeStuff(){
return {
doSomeRelatedStuff: function(){
}
}
}
Take a look at the doSomeRelatedStuff() function. It's a function that does some stuff but who does it belong to?
It belongs to the function above it: doSomeStuff()
It belongs to the function above it: doSomeStuff()
Now take a look at this, which defines a function within a function within a function:
function doSomeStuff(){
return {
doSomeRelatedStuff: function(){
return {
doOtherStuff: function(){
}
}
}
}
}
function doSomeStuff(){
return {
doSomeRelatedStuff: function(){
return {
doOtherStuff: function(){
}
}
}
}
}
Now have a look at doOtherStuff(). Which function does it belong to?
Once again, it belongs to the function defining it: doSomeRelatedStuff()
👉 This is what "this" points to.
Once again, it belongs to the function defining it: doSomeRelatedStuff()
👉 This is what "this" points to.
Therefore, running this code:
function doSomeStuff(){
return {doSomeRelatedStuff}
function doSomeRelatedStuff(){
console.log(this)
}
}
doSomeStuff().doSomeRelatedStuff()
Will print the doSomeStuff() in the console.
function doSomeStuff(){
return {doSomeRelatedStuff}
function doSomeRelatedStuff(){
console.log(this)
}
}
doSomeStuff().doSomeRelatedStuff()
Will print the doSomeStuff() in the console.
But what if the function calling "this", doesn't belong to any function? Example:
function doStuff(){
console.log(this)
}
function doStuff(){
console.log(this)
}
In this case, "this" returns what is called the "global object". In the browser, the global object is "window". In Node, it's "global".
The global object is basically contains the functions you can call without mentioning that object first. For example, "window.location.href" can be called without mentioning "window": "location.href".
OK, so what do we do with the "this" keyword?
Using "this" we have access to the parent object's properties.
Using "this" we have access to the parent object's properties.
Example:
function doStuff(){
return {
name: "Ben",
printName: function(){
console.log(this.name)
}
}
}
function doStuff(){
return {
name: "Ben",
printName: function(){
console.log(this.name)
}
}
}
In the code above doStuff() has a variable called "name" and a function called "printName". How can "printName" get the name to print it? It needs to get it from its parent object, "doStuff()". This is easy, because the "this" keyword can give "printName()" access to "doStuff()"!
In a VERY basic way, this is how "this" works in Javascript. At least in the context of functions. I hope it makes sense a little bit more. There is more to it of course, which you can learn here developer.mozilla.org/en-US/docs/Web…
• • •
Missing some Tweet in this thread? You can try to
force a refresh
