1
00:00:02,110 --> 00:00:05,020
All right, in this lecture, we're going to talk about classes.

2
00:00:08,790 --> 00:00:12,090
So class is what you provide a template for objects.

3
00:00:14,280 --> 00:00:19,140
So we'll talk about how class is declared, but when you do declare a class, it must be declared before

4
00:00:19,140 --> 00:00:19,830
it is used.

5
00:00:20,400 --> 00:00:28,260
Unlike function definitions, classes are not hoisted, which means it's not pulled up to the top to

6
00:00:28,260 --> 00:00:29,450
be put in the right place.

7
00:00:31,620 --> 00:00:35,670
Classes can have several things so they can have super classes.

8
00:00:35,670 --> 00:00:39,060
So you can extend a class and make a subclass.

9
00:00:41,740 --> 00:00:44,740
Classes have a constructor function or method.

10
00:00:47,460 --> 00:00:53,250
Classes have methods, these are known as prototype methods, and you can think of these as functions

11
00:00:53,250 --> 00:00:58,870
inside of the class that can have static methods and properties.

12
00:00:59,460 --> 00:01:02,910
So if you recall, we would use something like, no, that pass.

13
00:01:02,910 --> 00:01:05,400
And that is a static method.

14
00:01:05,760 --> 00:01:07,710
So it's on the tape itself.

15
00:01:09,630 --> 00:01:11,550
And then we have instant properties.

16
00:01:12,970 --> 00:01:15,970
So let's take a look at some examples of defining classes.

17
00:01:19,750 --> 00:01:27,310
All right, so let's use kind of a classic definition of a class, and classically people use shapes

18
00:01:27,760 --> 00:01:30,070
as classes because it's easier to understand.

19
00:01:31,030 --> 00:01:34,610
So we'll define a shape such as a rectangle.

20
00:01:36,580 --> 00:01:41,930
So we'll say class is a keyword and classes.

21
00:01:41,950 --> 00:01:48,670
It's common to give the name of the class a uppercase character, the beginning class rectangle.

22
00:01:51,400 --> 00:01:53,350
So that is our defined class.

23
00:01:54,850 --> 00:02:00,490
Now, you could define properties of a class very simply, just by putting the property name and I can

24
00:02:00,490 --> 00:02:01,150
say width,

25
00:02:04,360 --> 00:02:09,130
height, and there's two properties and then I create a constructor.

26
00:02:09,140 --> 00:02:14,280
And this is a method that's used when you create the class and you create an object of the class.

27
00:02:15,160 --> 00:02:16,750
So it's a constructor.

28
00:02:18,460 --> 00:02:21,500
And I want to know what within height is of this rectangle.

29
00:02:22,510 --> 00:02:26,740
So we'll say width, height in the constructor.

30
00:02:27,490 --> 00:02:30,930
And this is just like a normal function, but it doesn't have the name function.

31
00:02:32,680 --> 00:02:36,920
So I'm just going to set the width and height now instead of a class.

32
00:02:36,940 --> 00:02:41,800
You use this key word which refers to the class that's being instantiated.

33
00:02:42,520 --> 00:02:51,370
So I said this, that width equals with which is the width it's passed in from the constructor and this

34
00:02:51,370 --> 00:02:54,760
that height equals height.

35
00:02:55,750 --> 00:02:56,110
All right.

36
00:02:56,560 --> 00:02:58,090
So we have a simple class defined.

37
00:02:58,330 --> 00:02:59,980
How do we create a rectangle?

38
00:03:01,030 --> 00:03:05,710
So we create a rectangle by saying what are T equals?

39
00:03:05,710 --> 00:03:08,080
New rectangle.

40
00:03:08,860 --> 00:03:18,130
And then we peson our width and heights, all say 10 with 20 height and then a rectangle.

41
00:03:18,910 --> 00:03:20,050
So let's work this out

42
00:03:26,500 --> 00:03:27,610
and let's run this.

43
00:03:32,860 --> 00:03:34,030
So there's a rectangle.

44
00:03:35,660 --> 00:03:40,370
It's got a height of 20 and width of ten sector, a little world.

45
00:03:41,690 --> 00:03:42,830
Now, what else can we do with this?

46
00:03:43,160 --> 00:03:48,530
The reason that we have classes is to bundle a bunch of stuff together that's related to this type.

47
00:03:49,250 --> 00:03:58,670
So one thing we can do with rectangles is to calculate the area so we can say we have a method called

48
00:03:58,670 --> 00:03:59,280
area.

49
00:04:02,510 --> 00:04:05,060
And again, we don't specify the word function.

50
00:04:05,060 --> 00:04:13,490
We just we just define it and we'll say return this to height time, this that width.

51
00:04:15,320 --> 00:04:17,840
And we can have another one called perimeter

52
00:04:24,770 --> 00:04:35,000
and we can return this that height times to plus this, that width tends to.

53
00:04:36,620 --> 00:04:38,750
So now our class has a couple of methods.

54
00:04:39,770 --> 00:04:44,270
So let's just add this to what we're looking at will say.

55
00:04:47,940 --> 00:04:48,560
Area

56
00:04:51,840 --> 00:04:53,850
wrecked that area,

57
00:05:01,710 --> 00:05:11,670
further, wrecked that perimeter, and we've been using classes and objects all along, of course,

58
00:05:12,270 --> 00:05:17,520
with especially with arrays and strings, so this should be fairly, fairly familiar.

59
00:05:18,970 --> 00:05:21,850
All right, so let's go ahead and define our class again.

60
00:05:26,880 --> 00:05:34,530
So we have a width of 10 to 20 search areas, 200, and then we have.

61
00:05:38,980 --> 00:05:42,790
10 is 20, plus 40 is 60 is our perimeter.

62
00:05:51,830 --> 00:05:56,570
Now, a lot of times you define a base class for something and we're going to do that here, we're going

63
00:05:56,570 --> 00:06:03,140
to find a base class called Shape, you know, say class shape.

64
00:06:06,110 --> 00:06:08,170
And we're going to find some of the things that we see here.

65
00:06:08,180 --> 00:06:11,930
We're going to find constructor in an construction.

66
00:06:11,930 --> 00:06:12,800
We're going to have a name

67
00:06:16,100 --> 00:06:20,120
and you can define your name right here in the constructor.

68
00:06:20,150 --> 00:06:21,590
You don't have to define it first.

69
00:06:21,590 --> 00:06:23,090
So we can just say this.

70
00:06:23,090 --> 00:06:25,460
That name equals name.

71
00:06:29,010 --> 00:06:30,780
And then we'll say area

72
00:06:34,500 --> 00:06:37,090
return zero, because shape isn't a real shape.

73
00:06:37,230 --> 00:06:38,580
So we're just going to return zero.

74
00:06:38,620 --> 00:06:39,990
We can return more than.

75
00:06:47,670 --> 00:06:48,660
And perimeter.

76
00:07:03,730 --> 00:07:08,200
Now, honestly, here doesn't do it that much because a defined area and perimeter and shape, but make

77
00:07:08,200 --> 00:07:09,120
some use of them.

78
00:07:09,760 --> 00:07:15,280
So we're going to use the extend keyword to say rectangle extends shape

79
00:07:18,340 --> 00:07:20,480
and this is how we subclass.

80
00:07:21,550 --> 00:07:25,230
So in the constructor, let's add in taking a name of our shape.

81
00:07:26,260 --> 00:07:33,720
So we'll say name and then we don't want to have to in every single shape, set the name.

82
00:07:33,730 --> 00:07:38,200
So we're going to do is just pass this to the superclass.

83
00:07:42,030 --> 00:07:51,570
So there is a method called super, and we're just going to pass it today and let's add a little bit

84
00:07:51,570 --> 00:07:58,620
of logging here when we get into the shape, constructor will say a console log.

85
00:08:03,330 --> 00:08:04,780
The Shake

86
00:08:07,810 --> 00:08:08,680
Coffee this.

87
00:08:16,570 --> 00:08:19,280
Put this after the Super Bowl.

88
00:08:19,730 --> 00:08:20,500
Ask you to them.

89
00:08:26,750 --> 00:08:28,460
Airball, say, building rectangle.

90
00:08:37,150 --> 00:08:41,210
And then when we when we create the rectangle, we'll have to add a name.

91
00:08:42,130 --> 00:08:45,040
So we're going to call it my rectangle.

92
00:08:48,850 --> 00:08:51,670
All right, let's run that.

93
00:08:55,210 --> 00:09:01,090
So he says building shaped, building rectangle, and then we have a rectangle was the name My Rectangle

94
00:09:01,090 --> 00:09:04,690
with 10, 20 and then the area in the perimeter.

95
00:09:08,960 --> 00:09:15,890
Now we'll let one more class and we'll call it square and square is a type of rectangle, so we're going

96
00:09:15,890 --> 00:09:17,700
to extend square from rectangle.

97
00:09:18,410 --> 00:09:21,110
So let's make our lives easier and just copy this.

98
00:09:28,530 --> 00:09:29,370
It's a

99
00:09:32,700 --> 00:09:33,510
square

100
00:09:37,050 --> 00:09:45,240
rectangle now, a rectangle already has width, and so we don't find them here and we're going to take

101
00:09:45,240 --> 00:09:49,980
the name, the width and the height, but Square only has one side, so we're just going to take the

102
00:09:49,980 --> 00:09:50,360
width.

103
00:09:52,710 --> 00:10:00,840
So we're going to call the super and we're going to set the width and the width because the rectangle

104
00:10:00,840 --> 00:10:02,120
takes two sides.

105
00:10:04,210 --> 00:10:06,100
And so, say, building square,

106
00:10:09,730 --> 00:10:11,080
and we don't need to do this.

107
00:10:13,940 --> 00:10:19,460
In our area and our perimeter are the same for a rectangle is there for a square.

108
00:10:20,900 --> 00:10:21,790
So.

109
00:10:23,120 --> 00:10:27,050
So what we're going to do is just remove these methods because they're calculated the same way.

110
00:10:34,460 --> 00:10:40,460
And then when he squares area and perimeter are called, it's just going to use the rectangles version.

111
00:10:45,560 --> 00:10:47,660
So let's go up here and we'll create a square,

112
00:10:54,440 --> 00:10:56,150
we'll call it my square.

113
00:10:57,680 --> 00:10:59,090
It only takes one side.

114
00:10:59,100 --> 00:11:00,680
Some will say the width is 30.

115
00:11:02,420 --> 00:11:07,370
And then I'm going to repeat this council except for the square.

116
00:11:15,310 --> 00:11:16,420
All right, let's run this.

117
00:11:21,250 --> 00:11:27,400
So we built a shape of a rectangle, then we built a shape which built a rectangle, which built a square.

118
00:11:29,250 --> 00:11:36,030
So output, we got a square, its name is My Square, it's with us 30, its height is 30, its area

119
00:11:36,030 --> 00:11:39,200
is 900, which makes sense as premiere's 120.

120
00:11:40,140 --> 00:11:47,790
So let's just do a little bit of debugging here so we'll get a break on the definition of the square,

121
00:11:48,240 --> 00:11:49,890
because that's what we're really interested in.

122
00:11:53,230 --> 00:12:01,180
So run, break here, we're going to call MusicWorks, let's step in, and now we're in the square,

123
00:12:01,420 --> 00:12:05,000
which extends rectangle and the first thing it does is called the super method.

124
00:12:06,280 --> 00:12:08,050
So now we're in the rectangle.

125
00:12:09,610 --> 00:12:14,140
And we have the name, the width is 30 and the height is 30 because we just repeated it.

126
00:12:15,540 --> 00:12:20,970
And they're going to call the super method of the shape and all we have, there's the name.

127
00:12:23,940 --> 00:12:25,470
So we said the name

128
00:12:28,230 --> 00:12:31,650
and then we're in the rectangle, so we set the width and height of the rectangle.

129
00:12:33,860 --> 00:12:35,780
And then we logout building the square.

130
00:12:38,290 --> 00:12:41,290
And then when we're going to go in here and log it out.

131
00:12:42,550 --> 00:12:48,760
When we go to the area function, we're in the rectangle because even though this is a square squared

132
00:12:48,760 --> 00:12:51,940
is not defined area, so it uses the rectangles area.

133
00:12:52,870 --> 00:12:54,010
That's inheritance.

134
00:13:00,150 --> 00:13:01,670
And then Premer, same thing.

135
00:13:05,470 --> 00:13:06,010
That's it.

136
00:13:06,600 --> 00:13:10,560
So let's do one more thing, let's define a couple of static properties.

137
00:13:12,150 --> 00:13:16,660
So let's just define it on the square, we need to find it on all the levels.

138
00:13:17,370 --> 00:13:20,180
So what we'll do is we'll define a static property.

139
00:13:20,200 --> 00:13:21,600
We use the static keyword.

140
00:13:21,610 --> 00:13:29,120
So we say static and we'll say display type equals square.

141
00:13:30,870 --> 00:13:32,730
And let's go ahead and copy that to the others.

142
00:13:39,040 --> 00:13:39,850
Rectangle.

143
00:13:45,090 --> 00:13:45,990
And

144
00:13:49,110 --> 00:13:50,200
an associate.

145
00:13:56,730 --> 00:14:01,800
All right, so now when we're outputting this, one of the things being an output is.

146
00:14:03,550 --> 00:14:18,130
The tape, so you say square that display tape and up here we can say rectangle that display plaited.

147
00:14:23,890 --> 00:14:24,820
So let's run that.

148
00:14:28,440 --> 00:14:29,820
And we won't break.

149
00:14:32,410 --> 00:14:33,370
And then we have.

150
00:14:35,470 --> 00:14:37,900
The name of the display type is Rectangle.

151
00:14:38,900 --> 00:14:40,760
In the name of the square, the square.

152
00:14:42,840 --> 00:14:48,450
So that's an introduction to classes and when we get to our putting it all together section or really

153
00:14:48,450 --> 00:14:49,530
see some use of this.