watching fun fun function today we are
going to go through the absolute basics
of prototypes I’m going to explain what
prototypes are why you should learn them
and how they work this video is for you
if you are coming from another
programming language and you’re already
somewhat familiar with object-oriented
programming but you are confused about
how to do it in JavaScript specifically
this video is part of a series on object
creation in JavaScript and you will
probably be very confused if you start
watching the video here instead of the
video series from the beginning so you
can click in the find a link to a
playlist of the full series in the
episode description so we’re gonna talk
a little about what prototypes are why
you should learn them and how they work
what are prototypes you are probably
used to doing inheritance with classes
in JavaScript we achieve inheritance
using prototypes prototypes and classes
are different beasts um the real world
equivalent to a class is a blueprint you
have a blueprint of a building and you
use that blueprint of a building to
create new buildings the real world
analogy to a prototype would probably be
a delegate like a person that you vote
in to office that can vote on your
behalf so that when the government needs
to make a decision they will ask the
delegate instead of going around to
millions of people and asking what they
think because they have delegated that
decision to their elected delegate many
of you might be thinking why should I
learn prototypes because in newer
versions of JavaScript there is a class
keyword so your knee-jerk reaction might
be screw this prototype shite I’ll just
use classes instead but that kind of
reasoning will lead you into trouble for
two reasons the first reason is that
you’re missing out prototypes or is a
very simple and powerful inheritance
model it’s very nice and the second
reason is that the class keyword in
JavaScript is just a thin layer around
the prototype it actually uses the
prototype under the hood you can’t
really escape learning about the
prototype if you want to be a solid
JavaScript programmer because you will
always get confused constantly when you
see bits and bobs of the prototype
sticking out of your classes which you
will you might ask why did they add a
class keyword at all if the prototype is
so powerful why don’t you marry the
prototype the reason that classes were
added to JavaScript was simply that
people are very very used to classes and
confused by prototypes and they don’t
want to learn new stuff prototypes is
ironically a simpler concept than
classes but it’s still very confusing
coming into JavaScript if you’re very
used to the class inheritance model and
a lot of people are uncomfortable with
learning new things and this group of
people that really don’t want to learn
anything new they they are very strong
and very big so classes have been are
implemented in JavaScript on top of the
prototype in many different forms which
has made the prototype even weirder and
harder to understand because whenever
you read an article about inheritance in
JavaScript there is this weird
Frankenstein’s monster of the prototype
and the class jumbled together in some
ah the fear of learning new and
different things is actually so big that
the class keyword has now actually been
shoved into the es6 standard I don’t
necessarily think that is a bad decision
if people absolutely positively want to
cling on to their classes and use the
class inheritance model then at least we
should give them a standardized way of
doing it it’s sort of like giving
needles to drag
even if you hell-bent on using classes
in es6 you still need to understand the
prototype because it’s so ingrained in
how JavaScript works
you simply can’t avoid it as with
javascript in general actually let’s
just learn to like this thing because it
is inevitable it’s there we need to
accept it okay let’s begin with
something extremely basic this is going
to be a theme of this series we’re going
to be learning really learning the
details of the language from the
beginning we are going to write a
function that makes some noise to the
console
but uh gonna talk ah
and it’s going to console.log ah do
sound oh sorry sound and I’ve come to to
do call and this variable sound uh let’s
run that so Sam no sorry we have to pass
it something I’m very tired ah
what and we run that no don’t
prototype scare us and it says more for
I’m going to do the same thing again but
I am going to this time I’m going to do
a top function oh sorry so lock TT and
it’s going to knock out this sound right
and we’re going to call the talk jump
this waha dot prototype is a colleague
the file that and it’s going to return
undefined and this is because this in
this case a is going to be did you we
talked about this in the earlier episode
and really watch it if you haven’t I’m
going to log this out and just give you
a brief recap like this see now that
this one is
this print statement here and this
big-ass object over here that’s the this
object what this is when talk is being
executed and as you see here like you
see the set time out here and console
here and that means that this is the
global object and the global object it
doesn’t have sound property so we’re
going to assign this talk function to an
animal object let’s call this animal
entity and the animal is going to get
the top function okay it sound like this
and we are going to hmm let’s just call
animal talk animal don’t talk you pimp
you see what that gets us ah all right
so if we not check the this app this
console log statement here we see that
it’s actually now this equals the animal
an animal object so it’s gonna be
function talk and the second console log
statement it’s this one it’s still
undefined because animal as you see
doesn’t have a sound property I have a
tripod you Oh
this episode is ah I’m a bit stressed
out to be honest because I’m pressing
for the Brazil
jas a talk that I have at the end of
this week I’m flying to Brazil tomorrow
so on either way when we call a function
like this when it’s a assigned as a
property on an object and we we call it
like this that means that a javascript
will assign the animal as the dis
context of the talk so whatever is on
the left of the dot here will be this
when we are executing a talk by the way
a new handy feature in neck no script
six is that we can when we have some an
assignment like this where we’re
assigning up
property with the same name as the
variable that we’re assigning to it we
can simply omit this and it this is the
same thing so you see like this will be
the same same thing anyway this is not
very useful yet let us do a mm-hmm let’s
do a a a cat and we are going to huh
that is this is finally gonna get a
sound right it’s gonna say yeah BAM and
now we are going to do this object set
prototype of the cat we want to set that
to be animal uh before I do that though
I’m going to comment it out and just do
a try cat dot talk mm-hmm BAM it’s gonna
give us an error cats talk it’s not a
function right because you see get put
cat does not have a talk function but
what if we do this we move this up
before we call chapter talk we set the
prototype of cat to be animal don’t you
run that and now it works says meow so
what does have uh when we do this when
we access the torque property here on
cat when we do this what JavaScript the
JavaScript interpreter is going to do
it’s going to go here go and look inside
of the chat object literal and it’s
going to go through it and see that hmm
is there a talk property here no it is
not
hmm why where could the talk property be
then it’s the JavaScript interpreter
wondering and it might be in the
prototype it will ask itself
it’s going to look in the prototype just
can’t have a prototype and we will see
that we have set the prototype of cat to
be animal so it will walk to the
prototype and see like is there a
property called talk there and there is
uh-huh okay then we will call that one
and that is what happens so it’s going
to call that one which you see that the
reference goes here and it’s going to
call this and it’s going to reach this
line which is logged out here like that
this object is now going to be the cat
so even though there is a prototype
chains sees the animal like the D this
context when calling talk it’s still
going to be cat it’s not going to be
animal even though the animal is a
prototype it’s still like the cat that
is the center of attention here that is
still going to be this when you call a
property on the cat cat object and that
happens to be a function it’s still
going to be assigning this to be the cat
even though the talk method does not
really exist on the cat it exists on the
on the animal prototype object I’m just
going to show an another example i dag
dog and sound roof and we are going to
object don’t set prototype or dog and
that’s going to have animal and we’re
going to do dog don’t talk I’m gonna
remove this line here that long
something this object and just keep the
one logging out this don’t sound and I
got a ball go meow woof eight
set up a prototype chain if you want if
you want multiple levels so let me show
you how that works I can do let dot a
prairie-dog equals maybe how function
and I go this dot sound to uppercase and
I do phone sold of Lord for UNK
let me ah call that prairie-dog dot how
this is going to give us an error if I
call it correctly ah bulk cannot read
property to uppercase of undefined
because sound H is undefined here and as
you see that that is simply because well
there is no sound on prairie dog but if
we before calling how come object said
prototype Oh prairie dog to be dog and
run it it’s gonna go root or something
let me delete the cat stuff all about
dogs today and it’s important to
understand that prototypes are delegates
they do not create a copy of the
original animal object or or anything
like that dog will actually delegate the
prototype access to the original object
so they don’t work like classes which
creates a sort of copy from a blueprint
so for instance let’s say that I if I
change after setting the prototype of
the dog to be animal I go and change
animal not talk to be something else
function
called console dot log oh your mother 24
and I don’t know prove it time subject
as and you see that what I a monetary
part at because you see here like dog
the talk here even though we set the
prototype up here to the animal object
and we change it after doing that dog
what’s still like when we access this
and we’ll see like okay hmm
there’s no taught property on the dog
but looks like the programmer has set
the prototype of dog to be animal so I’m
going to go looking animal and okay I’m
looking in animal here and here’s talk
go there’s a talk property but we’ve
changed that to be told here so it’s not
gonna go here because this has been
reassigned this no longer exists ah it
has been garbage collected me and now
it’s going to go into here I am a little
teapot it’s still going to have access
to this like points of this dot sound
let’s run that I am a little teapot I’m
using some very convoluted examples here
this is absolutely nothing at all how
you use the prototype in real life but
I’m using these examples to try to get
you to understand that the prototype is
just a way of saying that for this
object use this other object as a backup
as a delegate as a prototype if someone
calls my object with a
property that does not exist on my
object go look in this other object that
is what the prototype is set prototype
of is pretty much never used in in real
applications but I’ve used it here in
order free to try to get you out of the
class mindset that we’re creating
objects using object I’ll create a new
and this and all that rather that
confuses the concept a lot it’s just a
delegate that we assign to an object
this was the absolute basics of the the
prototype like just showing you at least
be trying to show you what the core
concept of the prototype is but either
way prototypes are delegate you have
watched an episode of fun fun function I
release these every Monday morning Oh
800 GMT time if you have thoughts
questions insights about the prototype
check out the comments section below and
add your comments or help someone else
out that is confused I will also try to
help you out if none of your fellow
viewers are faster I am mvj till next
one of loot
I am mpj until next Monday morning thank you