What’s “This” in Javascript
In programming, there is this concept of scope, meaning what any given block of code pertains to. Sometimes in Javascript, we will see the word ‘this’ chained to a function like so.
this.someFunction()or in a constructor like this.
function Dog(name, age){
this.name = name
this.age = age
}So in each of these examples what is ‘this’?
We can’t really tell without more context, so let's look at how we can determine what ‘this’ is. To do that we need to have some understanding of what scope is, here is another post that goes into scope.
The most general scope that we have is global, so if we use the ‘this’ keyword outside of a function or variable we are referring to the global scope. This usually will point towards the ‘window’ object in our browser and can cause some confusing behavior if you think ‘this’ is referring to something else entirely. Generally, we would not want to refer to ‘this’ in the global scope, so knowing this one is more for debugging than for practical use.
Now we can move into the class scope of ‘this’. I personally think this is the easiest to understand, for the most part, it works as you might expect. If I have a class, and in that class, I have values and functions, when I need to refer to those values and functions while building the class I use the ‘this keyword to specify that the value or function BELONGS to THIS class, and shouldn’t be looked for elsewhere.
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
} }Above we have a Polygon class which we are giving two arguments, height, and width; we are using the ‘this’ keyword to say arguments passed will be applied to THIS instance of the Polygon class, not the class itself. We then are calling a function that lives inside of the Polygon class called ‘calcArea()’ inside of our ‘get area()’ function. Here we use the ‘this’ keyword to say THIS function is part of THIS class. Again this is where ‘this’ makes the most sense to me, ‘this’ in the constructor refers to an instance of the class, and within the functions ‘this’ refers to the class itself.
Finally, we have the function scope. Here we are using ‘this’ inside of a function that is not contained in a class, so ‘this’ must be the function, right? But that doesn’t make sense, if this referred to the function then every function we wrote would have so many ‘this’s in it. ‘This’ in a function is based on where the function was created, if it was created as a method of an object or a class, ‘this’ would point to that object or class, if it is typed in the gobal scope then ‘this’ would point to the ‘window’ object.
const a = 'something'
const obj = {a: 'somethingElse'}function funWithThis(){
console.log(this.a)
}funWithThis()//'this' is gloabal, console will print 'something'
The above function is trying to access a variable ‘a’ and print its value to the console. We are using the ‘this’ keyword here even though it is unnecessary. The variable ‘a’ is defined globally, so the function would have access to it regardless of using ‘this’, but, we can change the context of function by using ‘call()’ or ‘apply()’ to call and function. Here is more on call() and apply(), but in short they are ways to call a function and pass it a ‘this’ value. You could pass an object to a function that is not part of that object’s class and ‘this’ will work like it would if that function were to be part of the object’s class.
const a = 'something'
const obj = {a: 'somethingElse'}function funWithThis(){
console.log(this.a)
}funWithThis.call(obj) //now 'this' is equal to 'obj'
// the console will print 'somethingElse'
// the same workes for the 'apply()' method
Above we changed the context of the function by passing the ‘obj’ to the ‘call()’ function, so no ‘a’ doesn’t refer to the global ‘a’, but rather the value assigned to ‘a’ in our ‘obj’ variable. This means that we can change the context of this function from global, to any other object that we pass in to the ‘call()’ or ‘apply()’ functions!
There is one caveat with functions and the context of ‘this’, arrow functions. In ES6 arrow functions were introduced, and at quick glance they may just look like some syntactical sugar, but there is more going on under the hood.
Arrow functions differ from a traditionally typed function in that their context for ‘this’ will ALWAYS be where the function was called. So if we used a function in some HTML element, like a button to submit, and the function we pass is an arrow function than ‘this’ is that HTML element, in this case the button. Where if we passed in a regularly typed function and did not use ‘call()’ or ‘apply()’ then ‘this’ would most likely point to the ‘window’ object, since we would be in the gobal scope. If the arrow function was a method of an object though, it would not point to that object…
This is because the function may be CALLED from a different scope! And arrow functions always point to the the scope of where they were CALLED, not created. So we just need to remember to use a regularly typed functions when writing a method for an object.
So THIS IS IT! ‘This’ can be many different things, but if we can understand context and scope, and of course some good ‘ol exceptions, ‘this’ could be what ever you want it to be! You will have ultimate control over WHAT ‘THIS’ IS!
