In Javascript the thing called this is the object that owns the Javascript code
the value of this
When used in a function is the object that owns the function the value of this when used in an object is the object itself
When used outside a function or object this refers to the global object
So this that document is the same as document because it's in the global object and also
This in the web browser is equal to window
So if you do this, step a and set it to equal 37 and window dot a is going to equal 37
Let's see that in the console
So C. True true and in 37 any
Function if the value of this is not set by the call this will default to the global object
so for instance
This function returns this and here the function is called it returns this and we find out this equal to window
We can see in the console that
The function returns this and it equals to the global object
however in strict mode
the value of this remains at whatever was set to when entering the execution context so if
We run this code, and you can see at the end. We're gonna have false
Now this is going to be undefined. It's not going to equal the global object
Now I'm going to talk about the call and Apply methods
When a function uses the this keyword in its body
Its value can be bound to a particular object in the call using the call or Apply methods
So let's see an example of that we have this function add
Where we pass in C and d and it's going to return this a plus this dot B plus?
C and d so we're passing in the C and D and then it's going to be drawing these from outside of the function?
Here we have the variable o which is assigned an object where a is set to 1 and B
Is set to 3 we're going to run the add?
Function and where you're going to use the call method
The first parameter of call is the object to use as this and the other parameters are passed?
in as arguments in the function call so we are going to set this to oh and
Remember O has a set to 1 and b. Set to 3 and then we're going to pass in
5 and 7 so C and D become 5 and 7 here and this becomes O
so let's add a
Console.log here
If we run that we can see 16
That's just 1 plus 3 plus 5 Plus 7
Now apply is almost just like call the main difference is that call
Accepts an argument list while apply just accepts a single array of arguments
So we are passing in the arguments as 1 array instead of the list
And you can see in the console we have 34 that's just a 1 plus the 3 plus the 10 plus the 20
Now the bind method
When you call the bind method on a function and pass in an object
It creates a new function with the same body in scope as the original function
But where this occurs in the original function in the new function it is permanently bound to the first argument of bind
This will make more sense with an example. We created a function f and inside this function
We're going to return this dot a we are going to use the bind method
To figure out what this is going to refer to so here
We're going to create a new variable G and set it equal to function f
But we are going to bind the context of this
And we're going to pass in this object here where a is going to equal?
Unicycle, so if we console.log g
It's just going to return this to a and we set this and g to equal this context here where a equals
unicycle however, it's important to know if we create a new variable h and we try to do g dot bind and set a
Serial it's not gonna work with g. We've already set the context to this with this spine. You can't call bind again
Something that you've already treated with bind
Let me show that in the console first
I'm going to comment that out and
You can see it's going to be unicycle once unicycle twice because it doesn't work the second time now
Let me explain these last two lines here. So we're going to create a new variable oh and
We are going to set a to eight f to the f function
G to the g up here and eight, we're going to set to eight up here
So look how this works concert that log on a console dot log oh f well?
oh, well here's f and f is up here return this to a
Well, this is now going to refer to this context right here, so a is going to equal 8
Then we're going to console dog. Oh dot g
G has bound this to something else
G has bound a to unicycle, so instead of getting the a from here
It's going to a log unicycle, and then we have oh dot h
It's not gonna bind a second time so it's not going to bind Cereal to h
so if we run that we
Can see eight?
unicyCle unicycle
So that equals eight. This is unicycle, and this is unicycle, okay now
We're going to see how this works in errol functions may paste in another example
With erol functions. This is bound to the enclosing scope at creation time and cannot be changed
So the new operator by and call and apply have no effect on this
So let's see how it behaves differently in a traditional function versus an arrow function
We have bo here. Here's the traditional function where we're going to consult that log
Traditional function this equals equals oh question mark and then we're going to see does this equal equal equal oh
and then with the aerial function
We're going to consult log hero function this equals equals equals
Oh, and then see if this is true with the arrow function, and then we're going to see if it equals
the window here, so
if I run this
After calling the traditional function and calling the aral function and the traditional function this does equal
Oh, and you see that oh is
Where this traditional function is that inside? Oh?
However in the arrow function this is not going to be equal to oh
But this is going to be equal to window. That's true the arrow function attached to O
was
created in the scope of Window and
Run in the scope of O so this arrow function is forever bound to the scope of window where it was created
Okay, we're going to talk about one last thing with the this keyword
When a function is called as a method of an object
It's this is set to the object the method is called on so look at this example
we have oh and
Inside o we have a one property 37 and f is set to a function that's going to just return this that prop
So when we call oh f and we log that you'll see it's going to log 37
Let's run that to confirm here, and you can see at the bottom we have 37
Because this is going to be bound to the o object because the function is called as a method of that object
Now this behavior is not at all affected by how or where the function was defined?
So we just add them this new additional code. We're gonna set. Oh to just have this prop
that's gonna be set to 23 so here we had the prop and we had the function all with an o
But now we have the just the prop here
And then we're going to make the function independently so in this function independent
We're going to return this dot prop
Just like we did up here and we're going to set f to equal this function here
But we're going to call the function. Just like we did before and
Again, it's going to just get the number 23
So this is just showing that it doesn't matter where the function was defined
It just matters as being called from within the object so it's gonna refer to the property within the object
Well, thanks for watching my name is Beau Carnes. Don't forget to subscribe and remember use your code for good