Male: After the theory about the This Keyword
now comes the practice.
So let's start and simply log the This Keyword
for this global execution context.
So all we have to do is console.log this.
And what can we expect here?
Alright, so all this means is that the This Keyword
in the global execution context
is very simply the window object,
and that makes sense, right?
That's because the window object is the default object
as we learned in the last lecture.
Okay, let's come on out to this part of the code
and let's write a simple function.
And once again, we're going back
to our calculate age function,
because we already know that so well.
Alright, so console.log and 2016 minus the year,
and what we also want here
is to console log the This Keyword once again.
This...
Alright and when we call this function,
what can we expect this time?
Actually we have to write the function call up here,
so calculateAge, I'm going to go with 1985.
So let's refresh this,
and try to guess what we're gonna see now.
So we first have the result of thirty-one,
which comes from this log here,
and the This Variable is once again the window object.
So does this make any sense to you?
I hope so, because this is a regular function code
and not a method, as we learned in the last lecture.
In a regular function code, the This Keyword
always points to the window object.
And it actually makes sense,
because the object that this function is attached to
is the global object, and it actually makes sense.
Because the object that this function is attached to
is the global object.
So it has to be the This variable here as well.
Okay, so another method a regular function code,
so the This Variable is the global object.
So let's move on to an object here,
and we'll go back to our old John object.
So, name... John.
And here's not a semicolon, but a normal coma.
Then yearOfBirth is 1990.
And let's now add a method here,
and it will be our calculate age method once again.
So calculateAge and once again,
this is a little bit different than what we had before.
Right, because this is like a function expression
and not a function declaration.
So in here we can also console log the This Keyword,
but first of all, we have to perform the method code.
And that's as simple as this.
So we use John, and then we use the calculateAge
method on it.
So what's going to happen now,
and let me actually comment out this part of the code.
Alright.
So the This Variable now is the John object
and it makes absolute sense, right?
Because, as we know, the This Keyword
refers to the object that called the method.
In this case, it was the John object,
so, of course, it has to be the This Variable.
And we actually already saw this in action before
in the introductory lecture about objects
but at the time we didn't really understand it,
but now it makes total sense
why the This Keyword refers to the John object, right?
And now it also makes sense why we now can use this
to calculate John's age.
So console log this.yearOfBirth, right?
So let's run this again.... sorry.
And then we have the final result.
No, of course not, because it's of course 2016 minus this.
Alright, here we go.
Now let's take this even a bit further here,
and what we're going to do is to add a function
inside of the calculate age function or method.
So I'm simply going to call it innerFunction, okay.
So this function will not really do anything.
I just want to console log the This Keyword in here as well.
Alright and then we can call it, of course, innerFunction
and just like this because it doesn't have any parameters.
So now, when we call the calculateAge method down here,
not only will these two console logs here happen, right,
but also this function will be declared and then called,
and therefore the This Keyword will be logged as well.
And now try to guess what the This Keyword
is going to be like.
Alright, so once again, the This Keyword in here
is the John object, as expected.
Then the outcome is, of course, twenty-six
as we had before, but now comes something
that looks rather strange, right.
And that's the fact that the This Keyword
in this inner function here
is now back to being the window.
And this is a bit counter-intuitive, right?
And in fact, some people in the JavaScript community
agree with this, and other don't agree.
Some people think that the This Keyword in here
should still be the object, the John object, right?
But to me, actually, it makes sense that it's not
because it's simply the rule.
And the rule is that when a regular function code happens,
then the default object is the window object,
at least that's how it happens in the browser.
So once again this is not a method,
because the method is called calculateAge,
so it's method of the John object.
But this function here,
although it's written inside of a method,
it's still a regular function.
So when we call it the This Keyword
will no longer point to the John object,
but instead point to the window object.
Okay and this is something very important
to keep in mind for the future,
and also for future projects.
And now that this is really crystal clear,
let's now complicate things a little bit more.
So remember how I said that the This Variable is
only assigned a value as soon as an object calls a method.
So, I said this was important, so let's now see an example.
And for that, I'm going to create another object
which will be called Mike.
Var mike will be another object,
and his name will now be Mike, of course.
The yearOfBirth can be something like 1984.
Alright, now imagine that we want
to calculate the age of Mike.
So one thing that we could do is, of course,
to go ahead and copy this calculate method here
and paste it here in the Mike object.
But we could be really smart,
and instead do something that's actually a very common
practice in JavaScript and that we will also
use more in the future.
And that's something called Method Borrowing.
We are going to borrow John's method to use it on Mike.
And how are we going to do it?
It's very simple.
We just say that we want mike.calculateAge
to be john.calculateAge.
Simple, right?
So you see that in this case we don't have
the parenthesis because these parenthesis
are for calling a function, and now,
we simply treat the function here as a variable.
And so we can say that we want the mike.calculateAge
function to be the exact same as
john.calculateAge function, which is this one here, right?
Alright and if we now go ahead and use the function
calculateAge, because now I wanna really call it,
so I use the parenthesis.
So now, I'm going to go ahead and call the function.
But first, I will actually make it a bit simpler.
So, I don't want this code here anymore to get in my way,
so I'm now going to call it and what are we going to see?
Alright, so from the john.calculateAge call here,
comes the John object and the twenty-six age of John.
So exactly what we had before.
But when we now call the calculateAge method for Mike,
which we had borrowed,
then the object becomes the Mike object,
and now we have Mike's age here.
So this is truly amazing, right?
And this proves what I have said in the beginning,
which is that the This Variable is only assigned a value
when the object calls the method.
So if it wouldn't be like this,
then this This Variable here would always be John, right?
Because it's in fact attached to the John object.
But when we now call this same method from the Mike object,
then the This Variable becomes the Mike object.
So again, the This Keyword only becomes something
as soon as the method gets called.
And this something really important once again.
Okay, so I hope that this is really crystal clear now.
And with this, we reach the end of our theoretical lectures.
And for me it's really good to see
that you're still with me
after all of these more eratic lectures.
And believe me, that these lectures were really worth it,
and they will absolutely make you
a better developer over time.
And even if you don't understand it now,
I'm sure that you will eventually.
And so, from now on, we can build on
what we've learned so far,
and we can now focus even more on coding.
So let's continue doing that right now.
See you in the next lecture.