- [Instructor] A decorator is a design pattern
that allows us to dynamically attach additional properties
and methods to existing objects.
For example, let's say you wanted to build a camper van.
You could start from scratch and design a brand new
camper van, and then build it so that you could live in it.
Or you could simply start with a plain old work van
and add the features that you need
to the already existing vehicle.
With this approach you don't have to worry about
building an engine, axles, or van body.
You already have all that.
All you need to worry about is modifying the van
so that it has a bed, a sink, and a stove.
Sometimes in our applications we already have
the base objects that we need.
We can decorate these objects with additional
methods and properties to create many custom variations
of the same object.
The Gang of Four defines the intent of the decorator pattern
to attach additional responsibilities
to an object dynamically.
Decorators provide a flexible alternative to sub classing
for extending functionality.
Let's take a look at an example where a decorator
might come in handy.
Under our exercise files, in chapter three, lesson seven,
in the start folder, you will notice that
we have a shopper.js class.
Now for this example, the shopper.js is really unimportant.
It's important to know that a shopper has an account,
and that they can purchase items.
If they have enough money in their account,
then the items that they purchase will be saved
to an array called items.
They can also print their status which will let us know
how much money they have in the account,
as well as what items the shopper has purchased.
We also have an inventory item.
So the inventory item just has a name and a price
and a print method that prints the name of the item
alongside of the price.
If we look at our index.js file, we can see how these
objects will interact with one another.
We create a new shopper on line four,
Alex with a hundred dollars, and we create a couple
inventory items on line six and seven,
a walkman and a necklace.
So, Alex can purchase a necklace
and Alex can purchase walkman.
So when we print the status, Alex will have
a necklace and a walkman and the funds should be
subtracted from Alex's account.
So let's go over to our terminal and run this.
Index.js.
And we can see that we've purchased the necklace,
we've purchased the walkman, and I now have two items.
I also only have 60 dollars left in my account.
So, so far we haven't used the decorator design pattern.
The decorator design pattern is going to come into play
if we want variations on our inventory item.
For example, let's say we wanted a golden inventory item
or a diamond inventory item.
So we can create those classes as well.
And I'm going to do it in the same file so we will just
dis-structure our new inventory item decorators.
There we go.
So, we're going to import the inventory item,
the golden inventory item in the diamond inventory item
all from the same file.
So the idea here is that we can dynamically take
a regular necklace and make it out of gold.
So I can say var gold necklace, which will be a
brand new instance, is going to equal a new
golden inventory item, and I'm going to send it
the regular item.
So the item that we're actually going to start with.
Our base item is a necklace.
Our upgrade is the golden necklace.
Now the neat thing about inventory items is we can actually
apply multiple modifications to them.
So I can create a diamond, gold necklace
and we can create that using the new diamond inventory item
and we can also add the gold necklace.
So in order to create a diamond and gold necklace,
we will start with the base gold necklace,
which is going to start with the base necklace class.
So the key here is that we are doing
all of this dynamically.
We can also create a diamond walkman.
New diamond inventory item.
And we will use the base walkman instance,
and we will just make sure that we add
a new variation to that, the diamond walkman.
So here's an example of how we would use decorators
to enhance already existing object instances.
In the next lesson, let's go ahead and implement
the golden inventory item and
the diamond inventory item classes.