In this beautiful will look on all questions which are related to this and context inside JavaScript.
And you might get some question like this.
What will be locked here?
And the first task that you are getting, you have a function with function, key word.
This is important.
And now inside, we're just right in console.log this.
And now we're calling it item.
So the question is what we will see inside our console.log and actually in browser, you can see that
we're seeing a window.
And you might think, OK, inside functions.
This is always reference and window, but this is not correct.
Inside functions, this is referencing the global object.
It may be window.
It may be undefined and it may be something else.
It all depends on the context.
But if you define the function key word directly in JavaScript code without any Neston, it will be
a window.
Now you get getting question number two, what will be locked in this case?
As you can see here, we have an object item with title and get tied to method and inside cat item method
where console.log in this.
And here were common item door to get item.
And in the case with objects, when we have methods inside, objects were always referenced in this
object.
This means when were allowed in the page, we're getting this and this is our object with title and
get item.
In this case, we can use all properties inside our object because they're available for us inside this.
So when we are talking about objects, this always references our object.
So here is our task number three.
What will be logged in this case?
As you can see here, we have not an object, but a class.
And we also have inside the title and get tied to method.
And we also have this inside now we're creating the instance of our class and we're call a tighter method
from our instance.
This is important to remember that inside methods in our class, when we have an instance, we have
a reference to our instance.
As you can see in the browser, here we have this.
And we can use this word item.
This actually means that this object is in the instance of our item class and inside we have our title
ball so we can use all properties of this instance inside this.
But now we're getting the question of what will happen if we will pick a function inside our method.
So actually, what we're writing here is function, for example, some function and inside we are writing
this console.log.
And after this, we're just calling our some function, which actually means we define the function
with function key word inside our method.
And we're calling it here directly.
The question is what will be console.log to inside this?
As you can see in trousered, this is undefined because, as I said, inside functions were not referenced
in the window but were referencing in global object and actually window covered always is reference
in global object.
So in this case, it will never reference our instance.
And this is important to remember, which means if you have a function inside your class, these inside
won't be correct.
It won't be a reference in our instance of the class, and we can't use properties of it.
And exactly the same problem.
You will have not just was defined in the function like this.
But if you are writing, for example, a map for Ray inside your get item.
And here you have a function for every single item.
Now, if we will write console.log this inside, it will also be not correct.
As you can see in browser overload and page were get undefined at three times because here we are using
function, keyword and insert function.
It is reference and undefined.
So both these words are problematic.
And now the question is how we can fix it and get the reference to this.
And we have two solutions for this.
First of all, solution, which is older and it is also used when are built in JavaScript.
All the version for this we can simply define before this, for example, was underscore and where sign
in here reference to our this and this.
This will be correct because we're inside our method.
Now we can cancel.
OK, here, not this, because here the reference is strong, but this was underscore.
And here we have another reference.
Now let's to load the page.
As you can see, we have a correct reference to our instance of our item.
So this is typically older approach and it is used in the build step of JavaScript.
The better approach will be to use a narrow function here instead of function keyword.
So we can simply use here arrow function from ActionScript six.
And now, when we are console.log an inside out this, it will have the correct reference.
As you can see, the result is exactly the same because arrow function is get in the context of our
parent, which actually means from here we get in context that we have inside gate item.
And here we have a reference to our instance.
This is why I highly recommend you to always use arrow functions and not function keywords, and then
you won't have any problems with context.
So to sum this up inside function keyword, you always have a reference to a global object.
Inside objects, you have a reference to the object and self.
In classes, you have a reference to the instance of the class and inside function inside, for example,
method or directly insert class.
It will be a reference to define it.