watching fun fun function today we are
continuing our series on object creation
in JavaScript it might be difficult for
you to follow this episode if you have
not watched the previous episodes in the
series you can find a playlist of all of
them in the episode description this
episode is about the mysterious
underscore underscore proto underscore
underscore property that resides on
objects and how that compares to the
deep just the property that is just
called prototype first of all what is
proto I’m going to assay proto instead
of underscore underscore proto
underscore underscore from here on what
is proto I have just open up chrome the
browser from goo rules uh we will begin
by opening up the developer tools
clicking clicking and then I’m going to
sorry I’m going to click over here and
make it undock it to make it a separate
window and so now it’s a separate window
and it’s covering the entire screen I
will increase the size of it a little
bit to give a smooth so that you can see
even if you are viewing on mobile and
mopping-up console I’m going to begin by
creating some objects and that we are
going to call cat and it has a property
called
type no no not not breed uh and that is
called shiatsu no that’s not a cat
cat Petfinder calibrates American pop
the Wirehaired Balinese Bombay munchkin
oh my god oh my god this is amazing
hang on cat munchkin cat oh Jesus Christ
I want this cat all right either way you
yeah Italy ah munchkin there we now have
a cat object in our previous episodes
we’ve learned about our prototypes so we
can let me just remind you of how that
works let’s say that we are create my
cat and it has a name Oh
name and we call that fluffykins and yes
and um now we will make we do object oh
sorry object object dot set ro to time
of the my cat – a cat hop and if we now
do my cat dot there is of course it
don’t name but since my cat has a
prototype it will also have a breed
munchkin in the comment section of the
prototype episode are promised torchy
and the landrum debated a bit about
analogies on all prototypes and they
came up with a pretty good one you are
at school and you have are a paper that
is jus or a tester or something and you
need a pan but you don’t have a pen you
have a friend who might have a pen
so you ask your friend do you have a pen
the friend checks on his desk to see do
I have a pen checks or while there’s no
pen but instead of
just being a bad friend and saying oh I
don’t have a pan to you they check with
their friend because they also have a
friend if they have a pen and this
friend does have a pen and the pen will
be passed all the way back to you so
that you can complete your assignment
prototypes is not like class-based
inheritance where these instances of
stuff and things instead it’s a much
simpler model it’s just objects are that
delegate to other objects but what does
this relationship come from how do you
know that this person is your friend and
how does this person know that this
person is their friend here when I call
my cat read it will I look up the breed
property on the cat but how does it know
that well it’s it’s it is because I did
this set prototype of my cat to cat but
what is it exactly that is happening
here what kind of lookup is it doing is
it just some magic behind the scenes or
is there something more simple well it
turns out that there is a property on my
cat now called double double double dot
proto this object here that’s the same
one this up here and I also want to
repeat here for the billionth time just
so that you don’t forget it this is
actually a reference to these same
objects not an instance so that there’s
no plans and instantiation of objects
and prototypal inheritance let me show
you let me actually just modify the cat
to drive this home I’m going to say cat
dot ah tail length length blue ah and
it’s gonna be 15
em and now I’m going to call my cat
proto again you see that even though I
didn’t change the my cat I just change
the original cat here
the the proto will still I was still
update because it’s it’s not even
updating its it’s a reference to the
same object let me show you even more
like now I say like my cat and I go tail
length I see that it’s 15 so when we are
dealing with prototypes we have to
remember that all we’re doing is
delegation its objects delegating to
other objects if you’re very used to
class-based inheritance this is a bit
tricky to get used to because you are
used to there being a a chat class that
you make fluffykins instances of and
that is an extra step that you don’t
have in prototypal inheritance in fact
it might even be a bit misleading that
we as an industry are calling it
prototypal inheritance because it kind
of isn’t inheritance at all it’s just
prototypal delegation so some of you
might be thinking okay so that’s what
pro 2 does but I’ve seen this uh this
property called prototype and I how does
that relate to that one
in the previous episode we discussed the
new keyword just a recap it works like
this I do
let’s ah no no I do function dog ah and
it has thanks that’s enough and I do dog
dot prototype and I can do something
like bark and no I’m gonna do breed ah
dog and then I can do new dog and I can
do dog you know I need to assign that to
something tah I need to call it let my
doggy and I’m gonna call my doggy dot
our breed and that will be Bulldog so if
you remember from the last episode what
new is going to do is it’s going to
create a new plane object that it’s just
a simple object and then it’s going to
uh go and look at the function dog and
it’s going to take the object that is it
on its prototype property and it’s going
to set that object as the prototype of
the new simple object that it has just
created and it’s then going to feed it
into the dog constructor as the this
keyword and it’s then going to return
whatever the dog object returns or if it
doesn’t return anything it’s going to
return this simple object and it turns
out that this scenario the using the new
keyword to create object that is all
that this property a prototype is used
for so turns out that this the prototype
property this only exists on on
functions as a as a property and it’s
automatically created on functions and
it’s only created on functions in order
it like just in case you want to use
those functions as constructors with new
let me prove this to you if I look at my
doggy ah doggy
you remember that this does have a a
proto it the the prototype of my doggy
is the
and the Bulldog object or the dog object
ah but if I look at mine don’t Eve don’t
prototype that’s undefined there is no
prototype property on uh my doggy there
is a prototype on dog pops I type wrong
which is this object that has the the
breed property because we set it up here
you can see if we create a new function
let’s just say function shear off and I
do cheer-off
dot our proto time there is actually an
object there but if I just create a
plane object let’s say let’s um
I’m running out of animals a koala and
and I create a just a plane object bulk
a shack koala dot prototype its
undefined
there is no prototype so the caller
doesn’t have a prototype property but it
does have proto-punk that’s an object
let’s look at that
hmm yes this is the global object
prototype the the object that all
objects in JavaScript will delegate to
so if I say koala dot ah proto that is
going to be equal to the object dot
proto time bomb yeah those are the same
so if I if I do object don’t prove the
time this is not a by the way you
shouldn’t do this uh and I go
Shh waffle ah and I say we we we know uh
sorry I needed was mixing our quotes
there and I go koala dot waffle see that
it is I actually think that this means
that object is the global object is
actually not an object it is a function
yes exactly and because it has to be a
function or otherwise you wouldn’t be
able to do new object yeah if this
confuses you that is entirely okay
because you and this in JavaScript is
definitely one of the like most
confusing things ever devised
it is like let’s just say it it’s very
badly designed and in all fairness
JavaScript is almost not designed it’s
more like it’s something that has grown
over the years but yeah it it’s it it’s
very confusing and you’re okay if you
feel confused ah
but just you know become lean into it
and you will get it eventually if I was
allowed to change one thing of the whole
structure of how new is designed in
JavaScript I would not call this the the
prototype instead I would probably have
called it something like aa proto time
to install or something like that
because that is more descriptive of what
it does so it would be if you create say
a new let’s okay I’m gonna make another
drop call dial so JavaScript will
automatically create this handy
prototype object for you but what it
means is this is not the prototype
prototype this is this is a prototype
that is going to be used as the
prototype if you are calling new so it
should be prototype to install or I
don’t know prototype base no that’s
probably not clear prototype to use
proto type to use in new maybe I don’t
know really but something that is a bit
clearer so anyway to recap proto is the
property that on an object that actually
points out the prototype that has been
set for that object prototype is the
property on a function and it’s only
function that has this property that is
set as the property if you’re using the
new keyword and that is all this is
useful if something about this video is
unclear please post a comment down below
if everything was clear then you are
doing well you should look in the
comments and help somebody else out so
that they also can well if you found
this episode worth while please send it
to a colleague if you are that colleague
you have just watched an episode of fun
fun function this is a weekly program
show and I release new episodes every
Monday morning at over 800 JFC do not
miss it
subscribe I’m also a MP Jamie on
sure I’m till next Monday morning stay cure