1
00:00:00,170 --> 00:00:05,810
So as you can see side by side, I opened my Visual Studio Code editor and my browser using Live Server

2
00:00:05,810 --> 00:00:11,510
extension, and I already created an HTML document name index dot HTML.

3
00:00:11,630 --> 00:00:15,270
So at first inside the script tag I'm going to create a class.

4
00:00:15,290 --> 00:00:20,900
For that we need to use class keyword class employee.

5
00:00:22,850 --> 00:00:27,560
Then inside the curly braces I'm going to create a constructor method.

6
00:00:27,560 --> 00:00:34,520
And as you know to create a constructor method we need to use constructor, keyword constructor and

7
00:00:34,520 --> 00:00:35,480
round braces.

8
00:00:35,570 --> 00:00:40,800
Then inside the curly braces here I'm going to print a statement in our console.

9
00:00:40,820 --> 00:00:47,360
So I'm going to type console dot log inside the round braces.

10
00:00:47,390 --> 00:00:50,600
Here I'm going to type I am employee.

11
00:00:55,310 --> 00:00:57,380
And semicolon too, in this line.

12
00:00:58,660 --> 00:01:01,700
Now let's create an object using this class.

13
00:01:01,720 --> 00:01:05,020
For that I'm going to create a variable rate.

14
00:01:05,020 --> 00:01:10,600
And our variable name is a a assign with new.

15
00:01:10,780 --> 00:01:18,610
As I told you, to create an object we need to use new keyword new and our class name which is employee

16
00:01:19,360 --> 00:01:20,530
then semicolon to.

17
00:01:20,560 --> 00:01:21,520
In this line.

18
00:01:21,520 --> 00:01:27,100
If I save this file, as you can see in my console it print I am employee here.

19
00:01:27,100 --> 00:01:29,470
I type a spelling mistake for employee.

20
00:01:29,470 --> 00:01:31,300
We need to type e, not I.

21
00:01:31,450 --> 00:01:34,480
If I save this file you can see the result.

22
00:01:34,480 --> 00:01:40,720
I am employee and as we know in our previous tutorial we learned constructor method run automatically.

23
00:01:40,720 --> 00:01:43,000
We don't need to call it through our object.

24
00:01:43,000 --> 00:01:46,690
And now I decide I want to create another class.

25
00:01:46,690 --> 00:01:52,480
For that I'm going to type class keyword and our new class name is manager.

26
00:01:54,610 --> 00:01:59,140
Manager and this class inherit with employee class.

27
00:01:59,650 --> 00:02:04,180
So as I told you to inherit with another class we need to use extend keyword.

28
00:02:05,020 --> 00:02:09,010
Extend extends employee.

29
00:02:10,300 --> 00:02:12,130
Then inside the curly braces.

30
00:02:12,160 --> 00:02:17,950
For now I'm not going to type anything, just our manager class inherit with employee class.

31
00:02:17,950 --> 00:02:21,760
And now I decide I'm going to create an object with employee class.

32
00:02:21,760 --> 00:02:23,530
So I'm going to comment out this line.

33
00:02:23,530 --> 00:02:27,010
And in the next line I'm going to create a variable rate.

34
00:02:27,010 --> 00:02:31,990
And our variable name is b b as assigned with manager class.

35
00:02:33,040 --> 00:02:41,350
So to create an object we need to use new keyword new manager then semicolon to in this line if I save

36
00:02:41,350 --> 00:02:45,850
this file as you can see also it print in my console I am employee.

37
00:02:46,210 --> 00:02:53,740
But if you notice you can see in manager class we don't have any constructor method, but we can access

38
00:02:53,740 --> 00:03:00,880
employee class method using manager class because our manager class inherit with employee class.

39
00:03:00,880 --> 00:03:06,850
So in that case employee class is a base class and manager class is a derived class.

40
00:03:06,850 --> 00:03:11,110
And now I decide I want to send an argument to the manager class.

41
00:03:11,110 --> 00:03:15,490
So here I'm going to pass in name and I'm going to type add one means.

42
00:03:16,600 --> 00:03:17,650
Add one means.

43
00:03:19,030 --> 00:03:23,470
And as I told you we need to handle properties in our constructor method.

44
00:03:23,470 --> 00:03:26,530
So here we need to take a variable.

45
00:03:26,620 --> 00:03:29,020
And our variable name is name.

46
00:03:30,010 --> 00:03:32,830
And then I want to print the name in my console.

47
00:03:33,070 --> 00:03:36,100
So here I'm going to pass name variable.

48
00:03:36,100 --> 00:03:39,280
With that I'm going to use concatenation sign.

49
00:03:39,460 --> 00:03:45,640
So if I save this file as you can see in my browser it print at one means I am employee.

50
00:03:47,260 --> 00:03:53,230
Now the question is what happened if I create the same constructor class in manager class.

51
00:03:53,860 --> 00:04:00,310
So let's copy the constructor and I'm going to paste it inside the manager class.

52
00:04:01,030 --> 00:04:04,660
For now I don't want to send any argument to this constructor.

53
00:04:04,750 --> 00:04:07,210
So I'm going to remove this line.

54
00:04:07,450 --> 00:04:11,200
And here I'm going to type I am manager.

55
00:04:13,000 --> 00:04:18,970
If I save this file this time first it going to print this line then it's going to return an error.

56
00:04:19,240 --> 00:04:20,350
Let me show you.

57
00:04:20,500 --> 00:04:24,460
So if I save this file as you can see first it print am manager.

58
00:04:24,700 --> 00:04:29,500
Then it print an error message and say must call super constructor.

59
00:04:29,620 --> 00:04:37,000
As you can see, our object made with manager class and constructor method available in both the class.

60
00:04:37,150 --> 00:04:44,050
So both the classes hold the same exact method and be object made with manager class.

61
00:04:44,050 --> 00:04:46,060
That's why we can see this message.

62
00:04:46,060 --> 00:04:53,800
I am manager and if you want to access only the particular this constructor, I want to say the base

63
00:04:53,800 --> 00:04:54,970
class constructor.

64
00:04:54,970 --> 00:04:57,760
Then you need to use super function.

65
00:04:57,760 --> 00:05:00,160
So here we need to use super function.

66
00:05:00,160 --> 00:05:03,940
So I'm going to type super and semicolon in this line.

67
00:05:04,060 --> 00:05:08,680
If I save this file it's going to work but also it return undefined.

68
00:05:08,710 --> 00:05:09,610
Let me show you.

69
00:05:09,910 --> 00:05:13,810
So if I save this file as you can see undefined I am employee.

70
00:05:14,200 --> 00:05:20,860
And if we want to handle this argument in our manager constructor, in that case we need to take the

71
00:05:20,860 --> 00:05:22,900
variable name name.

72
00:05:23,500 --> 00:05:26,500
And also I'm going to use this name here.

73
00:05:27,250 --> 00:05:33,520
Name concatenate with I am manager if I save this file.

74
00:05:34,240 --> 00:05:37,000
As you can see advent means I am manager.

75
00:05:37,750 --> 00:05:45,220
And remember, if we use same constructor in our direct class, then we cannot send data to our base

76
00:05:45,220 --> 00:05:52,120
class because here we use the exact constructor because super function doesn't allow it.

77
00:05:52,540 --> 00:05:59,740
Now let's talk about prototype method how we can use prototype method in inheritance.

78
00:06:00,550 --> 00:06:05,860
So at first I'm going to comment out this constructor method in our manager class.

79
00:06:06,520 --> 00:06:13,780
Then in our employee class mean base class here I'm going to create a prototype method.

80
00:06:13,900 --> 00:06:16,900
So I'm going to type the method name which is inf.

81
00:06:19,150 --> 00:06:29,130
And inside the curly braces here I'm going to print console dot log I employee and semicolon too.

82
00:06:29,140 --> 00:06:33,070
In this line with that I want to print the employee name.

83
00:06:33,370 --> 00:06:39,260
But as you know if we want to use this property then we need to store it in a variable.

84
00:06:39,280 --> 00:06:47,200
For that I'm going to type this dot name equal to name.

85
00:06:47,350 --> 00:06:51,430
Now we can use name variable in my prototype method.

86
00:06:51,670 --> 00:07:01,240
So here I'm going to use after concatenation sign am employee I'm going to type this dot.

87
00:07:01,950 --> 00:07:02,520
Name.

88
00:07:03,810 --> 00:07:06,930
Let's change the variable name to avoid the confusion.

89
00:07:07,350 --> 00:07:09,660
Here I'm going to assign a new name, which is E name.

90
00:07:09,690 --> 00:07:11,280
E stands for employee name.

91
00:07:11,820 --> 00:07:17,550
So also we need to type this dot e name here if we want to call this variable.

92
00:07:17,790 --> 00:07:23,010
And now I decide I want to access this prototype method using manager class.

93
00:07:23,310 --> 00:07:26,250
But we create the prototype method in employee class.

94
00:07:26,250 --> 00:07:29,520
But as you know our class extends with employee class.

95
00:07:29,520 --> 00:07:31,440
That's why we can use it.

96
00:07:31,860 --> 00:07:34,590
So let's use this prototype method for that.

97
00:07:34,590 --> 00:07:45,660
As you know we need to call the object name b b dot our method name which is info and semicolon two.

98
00:07:45,660 --> 00:07:53,460
In this line, if I save this file, as you can see in my console, it print I am employee and one means.

99
00:07:54,060 --> 00:07:57,860
But if I use the same prototype method in our manager class.

100
00:07:57,870 --> 00:08:03,510
So I'm going to copy this prototype method and I'm going to paste it inside the manager class.

101
00:08:03,960 --> 00:08:07,830
Just I'm going to change a little bit I am manager.

102
00:08:08,690 --> 00:08:12,230
If I save this file this time, you can see here it print.

103
00:08:12,230 --> 00:08:18,890
I am manager and one means because this time this prototype method available in its own class.

104
00:08:18,890 --> 00:08:24,020
And our object made with this class, not the employee class.

105
00:08:24,380 --> 00:08:27,100
That's why it's called it's own method.

106
00:08:27,110 --> 00:08:32,360
But now you decide you are not going to use manager class prototype method.

107
00:08:32,390 --> 00:08:37,060
You want to access employee class prototype method mean base class.

108
00:08:37,070 --> 00:08:40,940
So as I told you here we need to use super function.

109
00:08:40,940 --> 00:08:45,080
For that you need to type super dot.

110
00:08:45,260 --> 00:08:49,910
You need to pass the prototype name and the prototype name is info.

111
00:08:50,420 --> 00:08:53,960
Then you need to pass the round braces and semicolon to end this line.

112
00:08:54,560 --> 00:08:58,820
If we save this file, as you can see my console now it's print.

113
00:08:58,850 --> 00:09:01,400
I am manager here.

114
00:09:01,400 --> 00:09:02,450
You can see my console.

115
00:09:02,480 --> 00:09:10,370
First it print I am employee at one means this line is from employee class and next it print.

116
00:09:10,370 --> 00:09:15,050
I am manager at one means this line is from manager class.

117
00:09:15,380 --> 00:09:19,310
Not only that also you can change the order of this prototype method.

118
00:09:19,340 --> 00:09:22,850
Suppose now you want first you want to print.

119
00:09:22,880 --> 00:09:25,310
I am manager at one range, then you want to print.

120
00:09:25,310 --> 00:09:26,770
I am employee at one range.

121
00:09:26,780 --> 00:09:30,710
For that just you need to change the super function order.

122
00:09:30,980 --> 00:09:32,570
So move the super function below.

123
00:09:32,570 --> 00:09:33,710
Then console dot log.

124
00:09:33,710 --> 00:09:34,910
If I save this file.

125
00:09:34,910 --> 00:09:37,430
As you can see now the order is changed.

126
00:09:37,670 --> 00:09:43,400
And now I'm going to show you the real life example why and how we are going to use inheritance.

127
00:09:43,700 --> 00:09:47,330
So as you can see we have total two classes employee and manager.

128
00:09:47,750 --> 00:09:52,160
And now I decide I'm going to take two more argument age and height.

129
00:09:52,160 --> 00:09:59,000
So here I'm to pass in our constructor method age comma height.

130
00:09:59,540 --> 00:10:05,510
And to store this property in a variable I'm going to take two other variable.

131
00:10:05,960 --> 00:10:25,610
So here I'm going to type these dot e age equal to age colon this dot height e height equal to height

132
00:10:26,420 --> 00:10:27,680
and semicolon to end the line.

133
00:10:28,490 --> 00:10:32,870
And now I decide I want to display all the information in this info function.

134
00:10:33,260 --> 00:10:35,180
So I'm going to comment out this line.

135
00:10:35,630 --> 00:10:44,270
And here I'm going to type document dot write inside the round braces.

136
00:10:44,480 --> 00:10:46,760
Here I'm going to use template string method.

137
00:10:46,760 --> 00:10:48,320
So I use Backticks.

138
00:10:48,620 --> 00:10:50,990
If you are not familiar with template string method.

139
00:10:51,780 --> 00:10:54,400
It is the new feature of ES6 version.

140
00:10:54,420 --> 00:10:57,090
Here we don't need to use any concatenation sign.

141
00:10:57,330 --> 00:10:59,400
I hope you are already familiar with that.

142
00:10:59,550 --> 00:11:03,360
So inside this backtick, first I'm going to print a heading tag.

143
00:11:03,630 --> 00:11:08,250
For that I'm going to use HTML tags h2 tag h2.

144
00:11:09,120 --> 00:11:12,210
Then inside this h2 tag I'm going to type employees.

145
00:11:12,960 --> 00:11:15,630
Then I'm going to close the H2 tag.

146
00:11:16,140 --> 00:11:19,920
H2 stands for heading two tag h2 close.

147
00:11:20,430 --> 00:11:26,850
Then I'm going to print name name colon.

148
00:11:27,120 --> 00:11:30,510
And I'm going to call the variable.

149
00:11:30,510 --> 00:11:33,000
And the first variable is for name.

150
00:11:33,000 --> 00:11:34,680
We set name variable.

151
00:11:34,680 --> 00:11:42,420
So I'm going to copy this dot name and to print this to use this variable here we need to use dollar

152
00:11:42,420 --> 00:11:42,840
sign.

153
00:11:42,840 --> 00:11:48,870
And inside the curly braces I'm going to paste the variable name this dot name.

154
00:11:49,260 --> 00:11:52,980
And also I'm going to use B tag to break the line.

155
00:11:53,310 --> 00:11:55,380
Then duplicate this line two times.

156
00:11:55,620 --> 00:12:03,330
And for h here I'm going to type h this dot e h.

157
00:12:03,840 --> 00:12:12,450
And for height I'm going to type height this dot e height and semicolon two in this line.

158
00:12:12,780 --> 00:12:16,290
And I don't need this info function from manager class.

159
00:12:16,290 --> 00:12:18,570
So I'm going to comment out this line.

160
00:12:19,080 --> 00:12:24,900
And with name I'm going to pass student age which is 24.

161
00:12:25,320 --> 00:12:31,020
Also I'm going to pass student height which is inside the double quotes one.

162
00:12:31,590 --> 00:12:33,660
75 centimeter.

163
00:12:34,110 --> 00:12:40,170
So if I save this file, as you can see in my browser, it print employee name, age and height name

164
00:12:40,170 --> 00:12:44,670
and one means age 24 height one 75 centimeter.

165
00:12:45,000 --> 00:12:49,590
And now I decide I want to print this same information for the manager.

166
00:12:49,590 --> 00:12:52,260
So I'm going to copy this prototype method.

167
00:12:52,260 --> 00:12:54,930
And I'm going to paste inside the manager class.

168
00:12:55,320 --> 00:12:58,860
But now I want to add new property to this method.

169
00:12:59,220 --> 00:13:01,560
So and our new property is salary.

170
00:13:01,680 --> 00:13:10,410
So I'm going to type let salary salary equal to $1,000.

171
00:13:11,490 --> 00:13:15,600
Also I'm going to change the heading text employee to manager.

172
00:13:16,080 --> 00:13:20,250
So in addition with the information I want to print manager salary.

173
00:13:20,730 --> 00:13:22,500
So I'm going to duplicate this line.

174
00:13:22,500 --> 00:13:24,600
And here I'm going to type salary.

175
00:13:25,650 --> 00:13:30,240
And also to pass the variable name salary.

176
00:13:30,900 --> 00:13:39,630
So if I save this file, as you can see in my browser now it's print manager name at one means age 24

177
00:13:39,660 --> 00:13:40,530
height.

178
00:13:41,110 --> 00:13:42,910
One 75cm.

179
00:13:42,940 --> 00:13:44,680
Also it print the salary.

180
00:13:44,710 --> 00:13:45,970
$1,000.

181
00:13:46,180 --> 00:13:47,530
To clear your doubt.

182
00:13:47,560 --> 00:13:49,240
Let create another object.

183
00:13:49,540 --> 00:13:50,960
So duplicate this line.

184
00:13:50,980 --> 00:13:54,250
This time our object name is Smith.

185
00:13:54,400 --> 00:13:57,210
And this object made with manager class.

186
00:13:57,220 --> 00:14:00,160
So I'm going to change the name Smith.

187
00:14:01,090 --> 00:14:08,650
And his age is 28 and his height is one 71 centimeter.

188
00:14:08,860 --> 00:14:13,240
And now I want to print Smith information in my browser.

189
00:14:13,360 --> 00:14:19,300
So here I'm going to call smith.info function if I save this file.

190
00:14:19,330 --> 00:14:23,830
As you can see now it's print all the information about Smith.

191
00:14:24,310 --> 00:14:31,300
This is the example of single level inheritance because here our class extends with only one class.

192
00:14:31,750 --> 00:14:34,480
Our manager class extend with employee class.

193
00:14:34,720 --> 00:14:38,290
But now I'm going to show you multi-level inheritance.

194
00:14:38,850 --> 00:14:41,970
So this is employee class.

195
00:14:42,090 --> 00:14:44,020
This is manager class.

196
00:14:44,040 --> 00:14:45,200
Extend with employee.

197
00:14:45,210 --> 00:14:48,270
And now I'm going to create another class.

198
00:14:48,810 --> 00:14:49,890
Class.

199
00:14:49,890 --> 00:14:52,290
And our next class is boss.

200
00:14:52,560 --> 00:14:53,640
Boss class.

201
00:14:53,760 --> 00:14:56,280
Extend with manager class.

202
00:14:56,520 --> 00:14:59,880
So now boss can access manager information.

203
00:14:59,880 --> 00:15:02,520
Also he can access employee information.

204
00:15:02,520 --> 00:15:06,870
But manager and employee cannot access boss information.

205
00:15:07,380 --> 00:15:10,020
Then I'm going to comment out this line.

206
00:15:10,470 --> 00:15:14,730
And now our Smith object made with boss class.

207
00:15:15,390 --> 00:15:16,260
Boss.

208
00:15:16,740 --> 00:15:18,300
And I'm going to save this file.

209
00:15:18,510 --> 00:15:19,830
After save this file.

210
00:15:19,860 --> 00:15:21,510
Now you can see it.

211
00:15:21,510 --> 00:15:24,300
Print all the information from the manager class.

212
00:15:24,300 --> 00:15:28,530
Because in our boss class we don't have any info method.

213
00:15:28,860 --> 00:15:33,040
But what if we comment out the info method?

214
00:15:33,060 --> 00:15:38,160
So I'm going to comment out this method from the manager class.

215
00:15:38,190 --> 00:15:42,900
Now you can see this info method is only available in employee class.

216
00:15:42,930 --> 00:15:50,280
If I save this time now you can see now it print the prototype constructor from the employee class.

217
00:15:50,460 --> 00:15:53,310
That's why it do not print the salary value.

218
00:15:53,640 --> 00:15:56,610
So our boss can access manager class information.

219
00:15:56,610 --> 00:15:59,700
Also it can access employee class information.

220
00:15:59,820 --> 00:16:03,690
Information means all the constructor and properties.

221
00:16:03,810 --> 00:16:06,540
So in that way, multi-level inheritance work.

222
00:16:06,630 --> 00:16:09,630
So this is the little example of inheritance.

223
00:16:09,810 --> 00:16:14,460
And inheritance is the most important part of the object oriented programming.

224
00:16:14,850 --> 00:16:16,590
So thanks for watching this video.

225
00:16:16,590 --> 00:16:18,540
Stay tuned for the next tutorial.