- [Instructor] The ES6 class keyword
allows you to build out prototypes
with more straightforward syntax.
So let's refactor our Hansel and pedal constructor functions
and prototypes as classes.
So starting with the item constructor,
let's just comment that out and start our new code below it.
So we use the class keyword and then the name of the class,
which is still going to be item with a capital I,
so we still have the same best practice here
as we do for constructor functions.
And then within the curly braces,
we're going to specify the parts of this class.
And so first we use the constructor method
and this lets us specify any properties
that were originally part of our constructor function.
And we're going to specify this dot type equals goods.
Now that's our property,
but we also have a log item method
that was in our item constructor as well.
So for a class, we specify methods separately
outside of that constructor method.
So I'm going to copy this log item method
from our previous code,
then go down to the end of the constructor method,
start a new line and paste that in
and we actually want to specify this
without using the function keyword
because we're specifying it as a method.
Then I need to uncomment all those lines I copied
tab those over.
Great, and so now I've got my constructor method
that specifies my property,
and then I've got the log item method,
don't need a semi-colon at the end of that
and that's it for the item class.
So comparing the old item constructor
and prototype statements with the item class,
there's one main difference
and that's that the entire content of the class
is enclosed in the braces for the class statement.
So the code is a little more organized,
even though under the hood,
it's still creating a constructor function
and specifying keys and values on its prototype.
So next let's move on to the live constructor
and so I'll comment out the live constructor
and we'll create a class live statement
and this time I need to add an extends statement
and that comes right after the name of the class
and this lets me specify
which other class I want to inherit from
in the prototype chain
and so I'll say extends item.
And then I'll use the constructor method
just like I did above
and I'll specify those parameters,
so we have name, pot, quantity with a default value of one
and now within the constructor,
I need to start by adding the super statement.
I need the statement when two things are true.
One that I'm specifying a constructor
that's inheriting from another class.
And two, I want to use the this key word
in the constructor.
Super is essentially fetching context from the parent class
and then after the super call, I specify my properties,
both the custom ones,
so I can actually just copy
my name, pot and quantity properties from above,
paste those in here, take the comments out, fix my dense
and I can also include the default one,
which I was adding to the prototype itself,
and then can simply save this, dot storage equals one.
And so again,
I've created a compact well-organized package
with my live class,
as opposed to the live constructor and prototypes index.
And it's pretty much the same with the flower class.
So we will comment that out, class flower,
and this is going to be extends item.
instructor. It's going to take quantity and color,
and we're going to call super to get this
and then this square bracket color equals quantity.
And then we come to the cut class
and here, refactoring our code as a class
is going to pay off with another benefit.
So our existing cut constructor
has a single property on its prototype, which is storage.
And storage has a value of cool.
And then both classes that are built on the cut prototype
arrangement and bouquet, defined name and vase properties
based on arguments
that are provided when the constructors are called.
With traditional constructors,
we can't pass arguments to customize inherited properties
and that leaves some duplication in our code.
For instance, in the existing code here,
both arrangement and bouquet have to define the name
and vase properties based on their own parameters.
But with class syntax,
we can specify parameters and assign property values
for properties that will be inherited
down the prototype chain.
So for cut, comment that out.
Class cut, extends item,
and then we're going to create a constructor
and our constructor will actually take the name
and vase parameters
that our previous code was only taking
in the descendant constructors.
And then we'll call super,
and then we can specify this dot name equals name,
this dot vase equals vase,
and this does storage equals cool.
Now our code never calls the cut constructor directly,
so we never actually call this class and pass it parameters.
But we can make use of the code we've just written
in the classes that descend from this one,
arrangement and bouquet.
And so refactoring arrangement will call that out,
class arrangement extends cut.
And then when we call the constructor,
we're going to have name, vase and quantity parameters
with a default value of one for quantity.
And so in the constructor method,
first thing I do is call super,
but in this case, I'm going to pass two arguments,
name and vase,
and this provides the mechanism
for those customized properties on the cut class
to get values when I call arrangement.
And then I'll assign this dot quantity equals quantity,
and then finally bouquet.
So we'll comment that out,
class bouquet, extends cut
and constructor it's going to take name and vase as parameters
and again, we will call super with name and vase,
so passing those parameters on
up the prototype chain to cut,
and then we need to specify this dot flowers
and that is an object that we're just going to copy
from our previous code.
So uncommenting this,
fix those in dense and so saving that code
and reloading in the browser
and we'll go to arrangements and we'll test that one out.
And so we've got those inherited properties, we've got type
and then we have customized properties
name, vase storage and quantity
and notice now we don't actually have
the method log item logged.
So this is based on the way our log item method was written
and we can verify though, that log item is a method
of the arrangement class
because we called it
in order to log this data to the console.
So we know it's there,
it's just further up the prototype chain
and not actually getting logged at this point,
but everything that this object needs to have,
it has just like it did before.
So switching over to live plants,
adding one of those same thing.
We've got all the properties we need
both the inherited ones and the custom ones
and then building bouquet, take some yellow Calla lilies,
and two orchids
and again, we've got all our properties,
we've got our flowers building out
and inheriting that type property
from up the prototype chain.
So everything works in the browser
just the way it did before,
but we've removed some duplication from the code.
So clearly if I'd used classes from the start
instead of rock instructors and prototypes,
the code would have been a little easier write
from the get-go.
So the class Syntax saves us some work
and result in better organized code.
And when I run that through a trans builder
like Babel before deploying it,
the result is going to be constructors and prototypes,
which are backward compatible.
So with classes, we have easier coding
and we can still write code and distributed in a way that
it maintains wide compatibility, so win-win.