All right, in this lecture, we're going to talk about classes.
So class is what you provide a template for objects.
So we'll talk about how class is declared, but when you do declare a class, it must be declared before
it is used.
Unlike function definitions, classes are not hoisted, which means it's not pulled up to the top to
be put in the right place.
Classes can have several things so they can have super classes.
So you can extend a class and make a subclass.
Classes have a constructor function or method.
Classes have methods, these are known as prototype methods, and you can think of these as functions
inside of the class that can have static methods and properties.
So if you recall, we would use something like, no, that pass.
And that is a static method.
So it's on the tape itself.
And then we have instant properties.
So let's take a look at some examples of defining classes.
All right, so let's use kind of a classic definition of a class, and classically people use shapes
as classes because it's easier to understand.
So we'll define a shape such as a rectangle.
So we'll say class is a keyword and classes.
It's common to give the name of the class a uppercase character, the beginning class rectangle.
So that is our defined class.
Now, you could define properties of a class very simply, just by putting the property name and I can
say width,
height, and there's two properties and then I create a constructor.
And this is a method that's used when you create the class and you create an object of the class.
So it's a constructor.
And I want to know what within height is of this rectangle.
So we'll say width, height in the constructor.
And this is just like a normal function, but it doesn't have the name function.
So I'm just going to set the width and height now instead of a class.
You use this key word which refers to the class that's being instantiated.
So I said this, that width equals with which is the width it's passed in from the constructor and this
that height equals height.
All right.
So we have a simple class defined.
How do we create a rectangle?
So we create a rectangle by saying what are T equals?
New rectangle.
And then we peson our width and heights, all say 10 with 20 height and then a rectangle.
So let's work this out
and let's run this.
So there's a rectangle.
It's got a height of 20 and width of ten sector, a little world.
Now, what else can we do with this?
The reason that we have classes is to bundle a bunch of stuff together that's related to this type.
So one thing we can do with rectangles is to calculate the area so we can say we have a method called
area.
And again, we don't specify the word function.
We just we just define it and we'll say return this to height time, this that width.
And we can have another one called perimeter
and we can return this that height times to plus this, that width tends to.
So now our class has a couple of methods.
So let's just add this to what we're looking at will say.
Area
wrecked that area,
further, wrecked that perimeter, and we've been using classes and objects all along, of course,
with especially with arrays and strings, so this should be fairly, fairly familiar.
All right, so let's go ahead and define our class again.
So we have a width of 10 to 20 search areas, 200, and then we have.
10 is 20, plus 40 is 60 is our perimeter.
Now, a lot of times you define a base class for something and we're going to do that here, we're going
to find a base class called Shape, you know, say class shape.
And we're going to find some of the things that we see here.
We're going to find constructor in an construction.
We're going to have a name
and you can define your name right here in the constructor.
You don't have to define it first.
So we can just say this.
That name equals name.
And then we'll say area
return zero, because shape isn't a real shape.
So we're just going to return zero.
We can return more than.
And perimeter.
Now, honestly, here doesn't do it that much because a defined area and perimeter and shape, but make
some use of them.
So we're going to use the extend keyword to say rectangle extends shape
and this is how we subclass.
So in the constructor, let's add in taking a name of our shape.
So we'll say name and then we don't want to have to in every single shape, set the name.
So we're going to do is just pass this to the superclass.
So there is a method called super, and we're just going to pass it today and let's add a little bit
of logging here when we get into the shape, constructor will say a console log.
The Shake
Coffee this.
Put this after the Super Bowl.
Ask you to them.
Airball, say, building rectangle.
And then when we when we create the rectangle, we'll have to add a name.
So we're going to call it my rectangle.
All right, let's run that.
So he says building shaped, building rectangle, and then we have a rectangle was the name My Rectangle
with 10, 20 and then the area in the perimeter.
Now we'll let one more class and we'll call it square and square is a type of rectangle, so we're going
to extend square from rectangle.
So let's make our lives easier and just copy this.
It's a
square
rectangle now, a rectangle already has width, and so we don't find them here and we're going to take
the name, the width and the height, but Square only has one side, so we're just going to take the
width.
So we're going to call the super and we're going to set the width and the width because the rectangle
takes two sides.
And so, say, building square,
and we don't need to do this.
In our area and our perimeter are the same for a rectangle is there for a square.
So.
So what we're going to do is just remove these methods because they're calculated the same way.
And then when he squares area and perimeter are called, it's just going to use the rectangles version.
So let's go up here and we'll create a square,
we'll call it my square.
It only takes one side.
Some will say the width is 30.
And then I'm going to repeat this council except for the square.
All right, let's run this.
So we built a shape of a rectangle, then we built a shape which built a rectangle, which built a square.
So output, we got a square, its name is My Square, it's with us 30, its height is 30, its area
is 900, which makes sense as premiere's 120.
So let's just do a little bit of debugging here so we'll get a break on the definition of the square,
because that's what we're really interested in.
So run, break here, we're going to call MusicWorks, let's step in, and now we're in the square,
which extends rectangle and the first thing it does is called the super method.
So now we're in the rectangle.
And we have the name, the width is 30 and the height is 30 because we just repeated it.
And they're going to call the super method of the shape and all we have, there's the name.
So we said the name
and then we're in the rectangle, so we set the width and height of the rectangle.
And then we logout building the square.
And then when we're going to go in here and log it out.
When we go to the area function, we're in the rectangle because even though this is a square squared
is not defined area, so it uses the rectangles area.
That's inheritance.
And then Premer, same thing.
That's it.
So let's do one more thing, let's define a couple of static properties.
So let's just define it on the square, we need to find it on all the levels.
So what we'll do is we'll define a static property.
We use the static keyword.
So we say static and we'll say display type equals square.
And let's go ahead and copy that to the others.
Rectangle.
And
an associate.
All right, so now when we're outputting this, one of the things being an output is.
The tape, so you say square that display tape and up here we can say rectangle that display plaited.
So let's run that.
And we won't break.
And then we have.
The name of the display type is Rectangle.
In the name of the square, the square.
So that's an introduction to classes and when we get to our putting it all together section or really
see some use of this.