Press "Enter" to skip to content

Prototypes in JavaScript – FunFunFunction #16


I am mpj and this is fun fun function to

you new viewers I do not normally look

like this I guess I’m a bit hungover

today so I just feel like wrapping

myself in a hoodie so what are

prototypes let’s say that you have food

in your software and you you want to

make more kinds of food you want to make

God waffles and I guess what if you have

waffles you need no other food but um

let’s say you maybe like carrots or

something in that context food is the

prototype of waffles and carrots some of

you are now thinking that reminds me of

classes and you would be right because

Pertex do remind of classes but they are

not the same thing so for this video try

to put classes aside and see prototypes

as a new thing and not shove prototypes

into that part of your brain where you

keep your classes because then you will

just be confused and unhappy

anyway let’s create a food object Tom’s

food equals object literal we’re gonna

give it a init method and that init

method is going to take a time and and

we’re going to assign that time to a

property on the current object and we

are going to have an all-important eat

method oh you ate the this don’t time

so as you see this is just a completely

normal object it has an init method ah

that assigns the type in fact we’re

gonna do that now gonna go food don’t in

it and we’re going to have a waffle and

it has the all-important eat method that

ah logs out you ate the list of time

plaits lets you set now who don’t eat

and let’s run that prototype chaos

that’s the file and you ain’t the work

phone this is fine but what if we want

to create more types of food objects

like those carrots I just realized that

I should give you full disclosure here

because my teeth might be red

drinking’s and we carrots this is where

object.create comes in I’m going to

delete these two lines here and I am

going to do a new calls god-awful and go

to object dot create food and on this

one we’re going to the net then to give

time for whole and we’re going to go

waffle eat and that you ate the waffle

we’re back to where we started but let’s

get that carrot into place to using

cones here Const means that you cannot

change the variable later otherwise it’s

just like let you should always use

cones if you don’t explicitly need the

mutability of o of let or bar for that

matter you should not use forever

unless you’re in some old environment or

something and we are carrots don’t darn

it carrot and Cara don’t eat you all

know what this will return you eight

waffle you ate the carrot looking at

this example you might infer that

object.create creates a copy of the

object let’s see if that is true don’t

you move this up a bit mm-hmm and I’m

gonna do this food don’t eat us function

also not log you total aid the like this

and we’re on it

what do you think will happen

ah I will suck and not being able to

code right

again you totally a doubling you truly

it occurs but this is kind of stranger

this means that object dot creates

cannot possibly be creating copies

because if it did this food eat would

not be affecting the the eat methods of

waffles and carrots because they should

be copies right but they do since you

totally ate the waffle the new method

signature does affect the waffle and

carrots even though we assign it to the

food object this is of course because

the object of trade does not create a

copy of the food object instead what it

does is that it creates a new empty

object for

waffle and carrot and it assigns food to

be a sort of fallback for those so

whenever we call a method or a property

on on a carrot or a waffle ah that

doesn’t exist on the carrot in the

waffle it will look in its prototype

object the food object and see if it’s

there

and then if it is it will use that one

and that is what we mean by waffle and

carrot having food as its prototype so

object.create

creates a new object and assigns food as

its prototype but one fall and carrot

will only fall back to food if it lacks

the property if it has the property it

will use that let me show you what that

means I am going to delete all the

carrot stuff from here carrot carrot

carrot empty lead and we no longer the

need this example but I am going to add

another eat method I’m going to clear

this and now we’re gonna run it just to

see what it looks for the tires don’t

change as you wait waffle you way to a

funny way too often now let’s see what

if I do this food dot tie what will he

die he will type when I run what do you

think will happen I will give you a

golden star if you figure this out

before I run it what do you think three

two one you knew that one right but what

if I comment out the in it a check it no

don’t prototypes but yes

did you guess correctly you guessed you

ate the undefined you a tip zip zip zip

city so in this first eat call here

waffle will not have a anything assigned

to the type property and when it

books in its prototype the food object

it will not have anything there either

so it’s going to return undefined

however here we assign this string to

the type property on the food object

which means that when in this second

call here waffle dot eat will well it

won’t still won’t find any type property

on itself because well that’s assigned

here in the init function and the init

function is commented out but it will

fall back to its food prototype and

there it will find the food type step

zip zip zip zop and I’ll put it here

I also quickly want to mention that you

can use prototypes to do type checking

going to delete this part here and bring

back the carrot and waffles that we saw

before and now you can actually do food

dot is prototype of waffle you could do

food its prototype or one two three four

five integer and food is prototype or

carrot this is super exciting

entertainment and I are gonna do in its

food do you know what this can be I

think you do I

I think you’re anticipating this are we

running it no our prototypes dr.azz and

what police food to end his food falls

and just chew yeah carry these food know

what okay or cabbie is food clear act

clear oh my god I’m so tired right

Carrie Carrie I roll

carrot is food true so you see that you

can use the food prototype to see if

that is used as a prototype in different

different objects and that is an

excellent way of doing type checking and

that is the basics of prototypes there

really isn’t much more to prototype some

done however while the concept of the

prototype is simple it does have some

very cool implications for the language

so on the next episode we’re going to

explore that a bit we’re going to

explore why prototypes or more powerful

than classes and I’m gonna show you some

cool tricks that you can do with it

do not miss that episode as usual it

will be released next Monday morning Oh

800 GMT butch if you want more videos

like this one right now you should check

out either the composition over

inheritance video or the factory

functions video I am mvj this is fun fun function until next Monday stay tuned

Please follow and like us: