So as you can see side by side, I opened my Visual Studio Code editor and my browser using Live Server
extension, and I already created an HTML document name index dot HTML.
So at first inside the script tag I'm going to create a class.
For that we need to use class keyword class employee.
Then inside the curly braces I'm going to create a constructor method.
And as you know to create a constructor method we need to use constructor, keyword constructor and
round braces.
Then inside the curly braces here I'm going to print a statement in our console.
So I'm going to type console dot log inside the round braces.
Here I'm going to type I am employee.
And semicolon too, in this line.
Now let's create an object using this class.
For that I'm going to create a variable rate.
And our variable name is a a assign with new.
As I told you, to create an object we need to use new keyword new and our class name which is employee
then semicolon to.
In this line.
If I save this file, as you can see in my console it print I am employee here.
I type a spelling mistake for employee.
We need to type e, not I.
If I save this file you can see the result.
I am employee and as we know in our previous tutorial we learned constructor method run automatically.
We don't need to call it through our object.
And now I decide I want to create another class.
For that I'm going to type class keyword and our new class name is manager.
Manager and this class inherit with employee class.
So as I told you to inherit with another class we need to use extend keyword.
Extend extends employee.
Then inside the curly braces.
For now I'm not going to type anything, just our manager class inherit with employee class.
And now I decide I'm going to create an object with employee class.
So I'm going to comment out this line.
And in the next line I'm going to create a variable rate.
And our variable name is b b as assigned with manager class.
So to create an object we need to use new keyword new manager then semicolon to in this line if I save
this file as you can see also it print in my console I am employee.
But if you notice you can see in manager class we don't have any constructor method, but we can access
employee class method using manager class because our manager class inherit with employee class.
So in that case employee class is a base class and manager class is a derived class.
And now I decide I want to send an argument to the manager class.
So here I'm going to pass in name and I'm going to type add one means.
Add one means.
And as I told you we need to handle properties in our constructor method.
So here we need to take a variable.
And our variable name is name.
And then I want to print the name in my console.
So here I'm going to pass name variable.
With that I'm going to use concatenation sign.
So if I save this file as you can see in my browser it print at one means I am employee.
Now the question is what happened if I create the same constructor class in manager class.
So let's copy the constructor and I'm going to paste it inside the manager class.
For now I don't want to send any argument to this constructor.
So I'm going to remove this line.
And here I'm going to type I am manager.
If I save this file this time first it going to print this line then it's going to return an error.
Let me show you.
So if I save this file as you can see first it print am manager.
Then it print an error message and say must call super constructor.
As you can see, our object made with manager class and constructor method available in both the class.
So both the classes hold the same exact method and be object made with manager class.
That's why we can see this message.
I am manager and if you want to access only the particular this constructor, I want to say the base
class constructor.
Then you need to use super function.
So here we need to use super function.
So I'm going to type super and semicolon in this line.
If I save this file it's going to work but also it return undefined.
Let me show you.
So if I save this file as you can see undefined I am employee.
And if we want to handle this argument in our manager constructor, in that case we need to take the
variable name name.
And also I'm going to use this name here.
Name concatenate with I am manager if I save this file.
As you can see advent means I am manager.
And remember, if we use same constructor in our direct class, then we cannot send data to our base
class because here we use the exact constructor because super function doesn't allow it.
Now let's talk about prototype method how we can use prototype method in inheritance.
So at first I'm going to comment out this constructor method in our manager class.
Then in our employee class mean base class here I'm going to create a prototype method.
So I'm going to type the method name which is inf.
And inside the curly braces here I'm going to print console dot log I employee and semicolon too.
In this line with that I want to print the employee name.
But as you know if we want to use this property then we need to store it in a variable.
For that I'm going to type this dot name equal to name.
Now we can use name variable in my prototype method.
So here I'm going to use after concatenation sign am employee I'm going to type this dot.
Name.
Let's change the variable name to avoid the confusion.
Here I'm going to assign a new name, which is E name.
E stands for employee name.
So also we need to type this dot e name here if we want to call this variable.
And now I decide I want to access this prototype method using manager class.
But we create the prototype method in employee class.
But as you know our class extends with employee class.
That's why we can use it.
So let's use this prototype method for that.
As you know we need to call the object name b b dot our method name which is info and semicolon two.
In this line, if I save this file, as you can see in my console, it print I am employee and one means.
But if I use the same prototype method in our manager class.
So I'm going to copy this prototype method and I'm going to paste it inside the manager class.
Just I'm going to change a little bit I am manager.
If I save this file this time, you can see here it print.
I am manager and one means because this time this prototype method available in its own class.
And our object made with this class, not the employee class.
That's why it's called it's own method.
But now you decide you are not going to use manager class prototype method.
You want to access employee class prototype method mean base class.
So as I told you here we need to use super function.
For that you need to type super dot.
You need to pass the prototype name and the prototype name is info.
Then you need to pass the round braces and semicolon to end this line.
If we save this file, as you can see my console now it's print.
I am manager here.
You can see my console.
First it print I am employee at one means this line is from employee class and next it print.
I am manager at one means this line is from manager class.
Not only that also you can change the order of this prototype method.
Suppose now you want first you want to print.
I am manager at one range, then you want to print.
I am employee at one range.
For that just you need to change the super function order.
So move the super function below.
Then console dot log.
If I save this file.
As you can see now the order is changed.
And now I'm going to show you the real life example why and how we are going to use inheritance.
So as you can see we have total two classes employee and manager.
And now I decide I'm going to take two more argument age and height.
So here I'm to pass in our constructor method age comma height.
And to store this property in a variable I'm going to take two other variable.
So here I'm going to type these dot e age equal to age colon this dot height e height equal to height
and semicolon to end the line.
And now I decide I want to display all the information in this info function.
So I'm going to comment out this line.
And here I'm going to type document dot write inside the round braces.
Here I'm going to use template string method.
So I use Backticks.
If you are not familiar with template string method.
It is the new feature of ES6 version.
Here we don't need to use any concatenation sign.
I hope you are already familiar with that.
So inside this backtick, first I'm going to print a heading tag.
For that I'm going to use HTML tags h2 tag h2.
Then inside this h2 tag I'm going to type employees.
Then I'm going to close the H2 tag.
H2 stands for heading two tag h2 close.
Then I'm going to print name name colon.
And I'm going to call the variable.
And the first variable is for name.
We set name variable.
So I'm going to copy this dot name and to print this to use this variable here we need to use dollar
sign.
And inside the curly braces I'm going to paste the variable name this dot name.
And also I'm going to use B tag to break the line.
Then duplicate this line two times.
And for h here I'm going to type h this dot e h.
And for height I'm going to type height this dot e height and semicolon two in this line.
And I don't need this info function from manager class.
So I'm going to comment out this line.
And with name I'm going to pass student age which is 24.
Also I'm going to pass student height which is inside the double quotes one.
75 centimeter.
So if I save this file, as you can see in my browser, it print employee name, age and height name
and one means age 24 height one 75 centimeter.
And now I decide I want to print this same information for the manager.
So I'm going to copy this prototype method.
And I'm going to paste inside the manager class.
But now I want to add new property to this method.
So and our new property is salary.
So I'm going to type let salary salary equal to $1,000.
Also I'm going to change the heading text employee to manager.
So in addition with the information I want to print manager salary.
So I'm going to duplicate this line.
And here I'm going to type salary.
And also to pass the variable name salary.
So if I save this file, as you can see in my browser now it's print manager name at one means age 24
height.
One 75cm.
Also it print the salary.
$1,000.
To clear your doubt.
Let create another object.
So duplicate this line.
This time our object name is Smith.
And this object made with manager class.
So I'm going to change the name Smith.
And his age is 28 and his height is one 71 centimeter.
And now I want to print Smith information in my browser.
So here I'm going to call smith.info function if I save this file.
As you can see now it's print all the information about Smith.
This is the example of single level inheritance because here our class extends with only one class.
Our manager class extend with employee class.
But now I'm going to show you multi-level inheritance.
So this is employee class.
This is manager class.
Extend with employee.
And now I'm going to create another class.
Class.
And our next class is boss.
Boss class.
Extend with manager class.
So now boss can access manager information.
Also he can access employee information.
But manager and employee cannot access boss information.
Then I'm going to comment out this line.
And now our Smith object made with boss class.
Boss.
And I'm going to save this file.
After save this file.
Now you can see it.
Print all the information from the manager class.
Because in our boss class we don't have any info method.
But what if we comment out the info method?
So I'm going to comment out this method from the manager class.
Now you can see this info method is only available in employee class.
If I save this time now you can see now it print the prototype constructor from the employee class.
That's why it do not print the salary value.
So our boss can access manager class information.
Also it can access employee class information.
Information means all the constructor and properties.
So in that way, multi-level inheritance work.
So this is the little example of inheritance.
And inheritance is the most important part of the object oriented programming.
So thanks for watching this video.
Stay tuned for the next tutorial.