watching fun fun function today we’re
going to look at examples of this and
vine this video is part of a series on
object creation in JavaScript this video
is for you if you are coming to
JavaScript from another programming
language you’re somewhat familiar with
object orientation you know what classes
and inheritance is but you are a bit
confused about how that is applied in
JavaScript specifically you will get
much more out of this video if you watch
the full series from the start you can
find a link to the full series playlist
with the full series in the episode
description so in the last episode we
explore this and bind reading the
comments on the last video it’s it’s
clear that while some people did have an
aha moment around this it’s also clear
that for a lot of you it just didn’t
quite click it is really really
important that we understand the concept
of this in order to fully understand how
the object model works in JavaScript so
I’m going to spend this video yes
churning out a lot of examples with this
and bind so in the last episode we
talked about the this keyword the this
keyword is a special keyword that you
can use in functions so this episode is
going to be all about this but before we
do that I’m going to we’re going to
begin with just a normal function that
doesn’t use this we’re gonna call it
talk and it’s talk is going to take this
sound and it’s going to log that sound
out to the console ah do and I’m going
to call talk and I’m going to pass it
like whoo let’s run that
no don’t example jazz woof okay now let
me delete the call here and I will
remove the talk the parameter to talk
and in
Stan I am going to try to access the
property sound on this so what is this
well the word this in JavaScript
actually means exactly the same thing it
does in English it doesn’t mean anything
without some context if you say to a
friend I don’t like this well they have
to infer from the context that you both
are in what you mean by this let’s see
what happens if I I call a talk here
like right away let’s run that node
examples of jazz undefined
why does line to here why does this
output undefined well it’s because uh
this let me remove the sound property
and run the code again you see that aha
okay this has like all these set
immediate settings of a console like
this is the global object this is uh if
this was this is node but if it was a
browser it would be the window object so
this this is this refers to the global
object and when you think about it it’s
not completely nonsensical I mean we’re
we’re calling talk here without any
other kind of context so the global
object the window object am not
completely nonsensical that it would be
this it’s a little misunderstanding
between you and the compiler and you
know misunderstandings they happen in
real life as well
you might have a friend over for dinner
and they say I don’t like this and you
say oh you don’t like the pasta
carbonara that I made for you no no the
pasta is great but your Jack Russell
Terrier Mike is is humping my leg under
the table I don’t like that so in order
to know that this is context is
important so let’s go back to adding
sound here so there are a couple of ways
that JavaScript will try to figure out
what you as a developer meant by this in
the last episode we talked about how you
can do it with bind so I’m gonna create
a Boromir object here for Amir from the
board of rings
Boromir and Boromir oh god I have a new
keyboard I’m not used to it and he says
he has the sound of the one does not
simply walk into Mordor I think I can
actually increase the size of this on
even more so now we are going to use
bind to create a copy of talk where this
is bound to the Boromir object so I’m
going to let uh I’m gonna call it talk
bound to four here and I’m going to call
top dot find a dot or Mir and I am going
to call talk to or Mir down let’s run
that no dot examples chaos one does not
simply walk into Mordor own on i/o fixed
one does not simply walk into Mordor
exclamation mark and notice that bind
does not mess with the talk function and
the talk bound Boromir this is a copy if
I call talk here let’s run that the
second call is going to be undefined
this is going to be undefined this is
going to work because this function is a
copy of talk where we have bound this to
a specific value or Muir well talk is
still like the vanilla function and when
we call that this is going to have to be
inferred and since we’re calling it in
the global context here this is going to
be the global the window object vine is
a way to be extremely explicit about
what we mean by this another way is to
place a reference to the function as a
property on an object can I do this here
place talk as a property on unborn male
called speak we could have called this
talk as well this property but I’m going
to call it speak just to illustrate that
all we were passing round function here
like just just like any other value it’s
very important to understand that in
JavaScript functions are just values
that you can pass around just like you
would pass around a number string or
boolean or or object in fact I think
that I’m going to do this instead you
can do this this might illustrate it
better so that the variable talk is we
assign this function signature to talk
and then we assign talk here as a
property called speak on boromir and now
if we call or Amir here dot talk let’s
run that boromir dot talk is not a
function no that’s true haha it’s it’s
peek that’s reassigned
why does not simply walk into Mordor so
when we do something like this we could
we are calling a property here a
property on an object of property on
boromir and when we do this javascript
can reasonably infer that we meant to
like that this should be bomber in in
this in this function that seems
reasonable at least that’s the way it
works now I’m nagging about this but I
really want to like stress that nothing
special is happening to the talk
function on this line all that happens
is that a a reference to the talk
function is being assigned as a property
nothing about the talk function is being
changed so if I if I call talk here call
the vanilla talk let’s run that it’s
going to be undefined
the first call here here it uses a
boromir as
this but here it will use the global the
window object as this and this makes
sense because here we are calling speak
as a reference on the Borah mirror
object and this is because here we are
calling it as a property on the boromir
object and then javascript in first that
we mean to use boromir as this but here
we are calling just talk the vanilla
function in the context of the global
window and it’s using this as a window
so speak and talk here they are
referring to the same function it’s not
even a copy it is literally the same
function to prove that to you I am going
to assign bore or a mere dot speak here
to a varial variable called blabber BAM
and I’m going to call bladder run it
no dot examples undefined and that is
because blabber here it refers to the
same function it has been passed around
a lot your talk and hear and speak and
then to blabber but it’s still a
reference to the same function all this
reassignment here it doesn’t change this
of the function anywhere at all
javascript won’t care about that because
it will in the end evaluate and figure
out what this is
at the time we call it unless of course
we have used bind we can use bind to
create a copy of a function it’s just
like the original function but where
this is bound to a specific value let me
do this I’m going to go talk of 5.0
mirror on that no dot sample Stooges ooh
Boromir is not defined ah it’s because
Boromir does not yet exist here because
this in this statement we are this is
the segment that
a science boromir so our mayor does not
exist at this point so I will need to
delete this and instead assign speak
once Boromir exists or Amir dots equals
one does not simply walk into Mordor let
me go back I’m going to comment that
find out so we just assign the vanilla
talk now run it again and now it’s
undefined
what bang does is to create a new copy
of talk but it’s almost the same stalk
but it has the difference that this will
now always refer to Boromir will always
be bound to Boromir so even though we’re
passing it around here and are calling
it without having it as a property on on
Boromir it’s still going to be Boromir
that is this and yes to show you that
it’s not modifying the original top
function I’m going to a call talk here
after blabber and let’s run that note
examples of jazz and you see that the
first call the one R that is calling the
bound function is one does not simply
walk into Mordor and the second is
undefined blabber is going to print one
does not simply walk into Mordor
because blabber has been bound to
Boromir talk however is just the
referring to the vanilla object so which
has not been bound in any way so here
it’s just going to fall back to using
the global the window object as as this
and that window object does not have a
property sound which means that it will
print undefined I’m going to show
another example to trying to get this to
click
let’s go back where we had talked as a
property on on Boromir speak don’t oh
let’s call it blabber this time blab
blab labarbera I’m going to make a
Gollum objects ah continuing the Lord of
the Rings theme his sound it’s of course
going to be my precious hope that’s how
it spells pay attention he is going to
have a property called jabber and that
property is going to point to Boromir
don’t blabber Wow try to anticipate and
try to figure out without me running it
what will happen if I call Gollum dot
jabber did you guess correctly no dot
examples of jazz I pray this is horribly
confusing code and you should never do
anything like this in a real codebase
what I’m showing this to you in order to
hammer it into our skulls that functions
are just values they live on their own
what this refers to is it’s determined
at the time of the call it’s it’s
context sensitive and it has to be
because a function doesn’t have just one
this it’s context sensitive a function
is just a value so it can be passed
around a function can be placed as a
property on an object it can be are
assigned to a variable or it can be
passed as an argument to a function a
function in JavaScript is it’s just like
a sentence in in English a normal
language for instance like the sentencer
this is a great ride can be said when
sitting in a car or sitting in a
rollercoaster and it will
mean different things and in the same
way a function can be called in multiple
contexts you cannot really say upfront
what this is without knowing where the
function is called unless you have used
bind to create a new function where this
is bound to a specific value that is all
I got you have watched an episode of fun
fun function this is a programming show
that I release every Monday morning this
particular video is part of a series
that I’m doing on object creation in
JavaScript you can find a link to a
place of the full series in the episode
description of the channel it also has a
bunch of other fun stuff check out the
channel below and you like if it’s
something that you like you might want
to consider subscribe or maybe even
follow me on Twitter
I am mpj until next Monday morning stay curious