In previous video, we talked about glasses and how to extend them, but the next question of interviewer
can be occasional glasses.
But do we have glasses actually in JavaScript or we have something else because we don't have any classes
in JavaScript?
And they are billed as a sugar for prototypes.
This is why now we must design exactly the same classes just by using JavaScript prototypes without
usage of glasses.
And actually, you need to do it at least once and then, you know, what are the problems here?
So first of all, we have our class amply.
And secondly, manage it and no one to refactor it to prototypes.
So first of all, we must move all these methods outside because actually lubricant tried them inside
the function.
And actually, what is a prototype?
This is a functional but don't use class key word, and they will use wire here because we're talking
about prototypes.
So this is the older version of JavaScript.
So here I have our employee, and this is just a typical normal function of this function.
Key word.
And here we get an idea and name.
And actually, this is also our constructor.
So we don't need constructor here.
We directly check, OK, if we have a name, then we are throwing in error.
But if not, we're sitting here.
This code and this name, which actually means this is our typical class when we're doing it with prototype.
Now we need to adjust all our functions.
As you can see here, I have this functions.
And now, instead of just that Silver Lake method, we must write it inside a prototype.
So we're saying simply dot prototype dot set salary and this will be a function.
So here with simplicity equals function word.
And here is our function, and we need to do exactly the same in every method.
So employee dot prototype dot get ad equals and here is our function.
And the same biscuit name and also with Gattellari.
So here is prototype get name equals function keyboard and here get salary.
Also the same employee prototype and get salary equals function.
And now was successful.
It affected our class to prototype, so it was not that difficult because we didn't extend.
And for now, I want a common thought manager, so we're not getting any errors.
Now let's check in transit overload in the page and now we here our employee.
As you can see, the code is looking exactly the same.
This is the instance of employee.
And here we have, for example, get a method where we're getting one.
Here we have celery so we can make get celery.
And it is all working, which means this is how you affecting your class.
Two prototypes.
And now we have a manager and extend and it will be more difficult.
So here we have a manager with said department and get department.
And yes, it also must be a function.
So here we can just write via.
And here we have our manager and we know that this is a function.
We also won't have said department and get department inside.
We will write them afterwards.
But here to the problem of a manager extends our employee.
But we are setting inside the same params and actually we don't want to write here and name, but we
can just write here params.
And we just want to throw all fields that we are getting and use here, our employee.
And for this, we can write code like this.
We can write, simply apply.
And here inside where python this common arguments and what this essentially does, it uses arguments
from this function.
And here this and this you can see here.
I also wrote Params.
We're not using them for now, but if you get the task to extend manager with some field, you can write
here.
This, for example, image equals params dot image.
And in this case, you must also pass in your manager and image.
This is totally possible, but we don't need it for our task.
This is why we simply use here and apply this argument.
And what it does, it literally makes an extend partially of our employer.
So as you can see here, we have this hidden name and actually where Colin dysfunction.
But we're giving it another context where given inside the context of our manager and all arguments
from this function.
But here is a huge difference that I want to show you actually, when we're jump into the browser and
right in here, manager prototype.
You can see here on a constructor function, but here if I will write employee prototype, you can see
here all the functions that were shared previously here on the top because actually this single line
is just calling the constructor simply.
It doesn't have anything to do with this prototype, which actually means this functions ANZ prototype
of employee and manager doesn't get them.
And this is super important because we're extending this class.
This means that we want to have them directly inside our prototype and we want to copy them how we can
do that.
We can write here manager doored prototype equals.
And here we want to use object create because we want to clone our employee prototype and inside were
passing our employee Dorte prototype in this case, were cloning in all this functions from our employee
to our prototype of manager.
So let's check what we're getting here.
I'm reloading the page and right in here, manager or prototype?
And as you can see, this is now a copy of our employee and we can do it here.
Manager prototype build get data, for example.
And.
We're getting this method.
Obviously, it is undefined because this is not an instance about a class, but we have access to this
method inside.
But here is also a huge problem.
One we're right in here, manager the prototype dubbed constructor where getting the constructor of
our employee and not manager and this is wrong.
This is what we must right here.
Also Manager Dot Prototype Dot Constructor.
And we want to sign here our manager function.
In this case, it will be 100 percent correct.
And as you can see, we're getting reference to our manager.
So these are two lines which are super important when you are doing the stand with prototypes because
first of all, you want to get the letters from our employee.
And secondly, you need to override constructor back to our manager.
And now we can use said department and get department.
This is exactly the same like it was previously.
It is manager or prototype.
And here we are signing our said department and here manager dot prototype dot get department.
And here, of course, we need to write the function key word and exactly the same should be here on
the top.
In this case, we successfully implemented manager just like it was done previously with classes.
Let's realize our page and check.
As you can see, we're getting our manager with ID and name.
But we also have a function, said Department.
We can write, for example, here development.
And now we're having said manager also development and we have a nice kid department function.
And obviously, we can use the same function, for example, get it from our parent and it is also working.
So this is your typical of religious prototypes and implement classes with native prototypes and so
JavaScript.