- [Instructor] You create a prototype in JavaScript
by building out a constructor function.
This constructor contains only the custom properties needed
by each object that it creates.
Then you specify any common properties
using the functions, prototype property.
Our code for the Hansel and pedal website
uses constructor functions to build out objects
for four different types of items,
arrangements, live plants, bouquets, and flower stems.
Well, some of the properties assigned to constructed objects
are customized based on arguments passed
in the function call.
Every constructed object
contains a few properties and methods
whose values are common
to all objects created using that constructor.
How could we use prototypes
to reduce the memory footprint of our code?
Well, first we need to identify which keys and values
are common to all objects constructed
by a given constructor.
Then we can assign those properties and methods
to the constructors prototype
and remove them from the constructor function itself.
Once this change is implemented,
when multiple objects based on that constructor
are in memory at the same time,
the objects will share the common properties and methods
from the prototype rather than duplicating them.
So here near the bottom of our all js file
is our set of constructor functions.
And starting with arrangement,
we can see that type and storage properties
are not customized when the function is called.
Their keys and values are copied verbatim
and likewise for the log item method.
So I'll go down here in 657 add a new line
and right below the constructor,
I'll start by adding some new statements
to set these properties on arrangement dot prototype.
So arrangement dot prototype dot type equals floral
and so now that I've set this on the prototype object
for the arrangement constructor,
I can actually just take it out of the constructor itself
and likewise for arrangement dot prototype dot storage,
set that value to cool and take it out of the constructor.
And so now, every object
created with the arrangement function
gets these three customized properties at the start
and it inherits these other two properties
from the prototype
without actually copying them into itself.
Now we have one more property that's not customized,
and that is the log item function, the method.
So I'll add one more prototype property down here,
arrangement dot prototype dot log item
and I'm just going to copy and paste that
and then I can delete that property as well
from the constructor function, so line 649 to 654,
I'm going to take out.
So now my constructor function
creates new properties for each object
only when those properties have values
that are passed into the function call.
So I'm using these parameter values
as the values of those properties.
All the other properties and the method
are inherited from the prototype
of the arrangement constructor
and those will be common and shared
among all objects created
by the arrangement constructor function.
And so we can do the same thing for our other constructors.
So down here in live,
I also have type and storage and log item
and so I am going to grab the arrangement prototype statements
up here, copy those to the clipboard
and then down here below the live constructor,
I'm going to paste those in
and just change arrangement to live
and so we have that same value for type
which was floral,
so I'll take that out of the live constructor
and then storage,
I need to switch to live
and storage value should actually be warm here
and so then we can take out line 660
and then changing the arrangement to live
for the log item function, that's exactly the same.
So taking outlines 663 through 668
and so again now for the live constructor,
we have just the properties being set for each new object
whose values depend on the parameter values
that were passed in on the function call.
and then the remaining properties
whose values are set
are all shared from the prototype object
among all objects that are created from this constructor.
And so we'll do the same thing with bouquet
and again, I will just copy this live
prototype statements because
we're going to be seeing a lot of duplication.
So we'll save ourselves some typing down here
and so we'll change this first one to bouquet
type is floral,
so we can take that statement out of the constructor.
Second one, bouquet dot storage
and storage is going to be cool here
and then we can take out line 674 in the constructor
and then changing live to bouquet for log item function,
we know that's the same,
so we can take out lines 676 to 681 in the constructor.
And then we have the flowers property
and this has simply one method,
which is common to all objects
created from the bouquet constructor
and so we'll go ahead and add another prototype statement
down here for bouquet dot flowers
and we will just copy
and so I can copy that flowers object
down to the prototype statement instead,
stick semi-colon on the end
and then I can take out that property,
so line 676 to line 680 in the constructor.
And so now my bouquet constructor has just two properties
and I've added a method
as well as the type and storage properties
and the flower property,
which is an object to containing a method to the prototype.
And so finally with the flower constructor,
so after the flower constructor function,
let's say flower dot prototype.
So the only common item here is the log item method,
so I'm going to just copy the log item method
to the prototype statement
and then I can take out
lines 693 and 690 in the constructor.
And so in our constructor,
we get that single key value pair of color equals quantity
and then the prototype is going to store
that log item function to be shared in common
with all objects created from this constructor.
And so saving my changes
and I have this folder serving from HTTP server.
So reloading in the browser and let's test things out.
So for an arrangement can add to basket
and we notice here that we still have listed
all of the properties and values,
we have the log item method,
but now the customized values name, vase and quantity
are the only ones that are actually stored in that object
where the type storage and log item method
are being inherited from the prototype object.
And so switching to live plants,
I'll add one of those to the basket and same thing,
we have this custom properties name, pot and quantity,
and then the inherited ones type storage and log item.
And then finally building a bouquet,
I'll do five Calla, lilies, and purple,
I will do three Peruvian lilies and add those to the card.
And so again, we have the name and vase, custom properties,
the type storage and log item inherited from the prototype.
And then in our flowers property,
we have two sub object plus that add stem method,
which is also inherited from that bouquet prototype
and so the functionality here is unchanged,
but now we're working from code that uses prototypes
to reduce its impact on our memory.