1
00:00:00,300 --> 00:00:06,330
In previous video, we talked about glasses and how to extend them, but the next question of interviewer

2
00:00:06,360 --> 00:00:08,100
can be occasional glasses.

3
00:00:08,280 --> 00:00:14,310
But do we have glasses actually in JavaScript or we have something else because we don't have any classes

4
00:00:14,310 --> 00:00:15,060
in JavaScript?

5
00:00:15,210 --> 00:00:17,670
And they are billed as a sugar for prototypes.

6
00:00:17,970 --> 00:00:23,910
This is why now we must design exactly the same classes just by using JavaScript prototypes without

7
00:00:23,910 --> 00:00:24,930
usage of glasses.

8
00:00:28,130 --> 00:00:32,600
And actually, you need to do it at least once and then, you know, what are the problems here?

9
00:00:32,900 --> 00:00:35,210
So first of all, we have our class amply.

10
00:00:35,390 --> 00:00:39,380
And secondly, manage it and no one to refactor it to prototypes.

11
00:00:39,650 --> 00:00:45,470
So first of all, we must move all these methods outside because actually lubricant tried them inside

12
00:00:45,470 --> 00:00:46,130
the function.

13
00:00:46,340 --> 00:00:47,830
And actually, what is a prototype?

14
00:00:47,860 --> 00:00:53,120
This is a functional but don't use class key word, and they will use wire here because we're talking

15
00:00:53,120 --> 00:00:53,990
about prototypes.

16
00:00:53,990 --> 00:00:56,450
So this is the older version of JavaScript.

17
00:00:56,720 --> 00:01:02,000
So here I have our employee, and this is just a typical normal function of this function.

18
00:01:02,000 --> 00:01:02,480
Key word.

19
00:01:02,720 --> 00:01:04,730
And here we get an idea and name.

20
00:01:04,880 --> 00:01:07,370
And actually, this is also our constructor.

21
00:01:07,580 --> 00:01:09,410
So we don't need constructor here.

22
00:01:09,560 --> 00:01:13,760
We directly check, OK, if we have a name, then we are throwing in error.

23
00:01:14,000 --> 00:01:15,590
But if not, we're sitting here.

24
00:01:15,590 --> 00:01:22,100
This code and this name, which actually means this is our typical class when we're doing it with prototype.

25
00:01:22,340 --> 00:01:24,830
Now we need to adjust all our functions.

26
00:01:25,040 --> 00:01:27,050
As you can see here, I have this functions.

27
00:01:27,200 --> 00:01:32,480
And now, instead of just that Silver Lake method, we must write it inside a prototype.

28
00:01:32,690 --> 00:01:38,750
So we're saying simply dot prototype dot set salary and this will be a function.

29
00:01:38,870 --> 00:01:41,720
So here with simplicity equals function word.

30
00:01:41,900 --> 00:01:46,400
And here is our function, and we need to do exactly the same in every method.

31
00:01:46,430 --> 00:01:51,860
So employee dot prototype dot get ad equals and here is our function.

32
00:01:52,130 --> 00:01:55,400
And the same biscuit name and also with Gattellari.

33
00:01:55,640 --> 00:02:01,010
So here is prototype get name equals function keyboard and here get salary.

34
00:02:01,010 --> 00:02:06,080
Also the same employee prototype and get salary equals function.

35
00:02:06,260 --> 00:02:07,430
And now was successful.

36
00:02:07,430 --> 00:02:13,250
It affected our class to prototype, so it was not that difficult because we didn't extend.

37
00:02:13,550 --> 00:02:18,170
And for now, I want a common thought manager, so we're not getting any errors.

38
00:02:18,200 --> 00:02:22,910
Now let's check in transit overload in the page and now we here our employee.

39
00:02:23,120 --> 00:02:25,850
As you can see, the code is looking exactly the same.

40
00:02:26,060 --> 00:02:27,830
This is the instance of employee.

41
00:02:28,010 --> 00:02:31,460
And here we have, for example, get a method where we're getting one.

42
00:02:31,640 --> 00:02:34,430
Here we have celery so we can make get celery.

43
00:02:34,610 --> 00:02:38,420
And it is all working, which means this is how you affecting your class.

44
00:02:38,570 --> 00:02:39,530
Two prototypes.

45
00:02:39,890 --> 00:02:43,880
And now we have a manager and extend and it will be more difficult.

46
00:02:44,150 --> 00:02:47,720
So here we have a manager with said department and get department.

47
00:02:47,990 --> 00:02:49,990
And yes, it also must be a function.

48
00:02:50,000 --> 00:02:51,770
So here we can just write via.

49
00:02:51,950 --> 00:02:55,490
And here we have our manager and we know that this is a function.

50
00:02:55,820 --> 00:02:59,420
We also won't have said department and get department inside.

51
00:02:59,600 --> 00:03:01,460
We will write them afterwards.

52
00:03:01,730 --> 00:03:05,600
But here to the problem of a manager extends our employee.

53
00:03:05,780 --> 00:03:11,960
But we are setting inside the same params and actually we don't want to write here and name, but we

54
00:03:11,960 --> 00:03:13,760
can just write here params.

55
00:03:13,940 --> 00:03:18,560
And we just want to throw all fields that we are getting and use here, our employee.

56
00:03:18,830 --> 00:03:21,070
And for this, we can write code like this.

57
00:03:21,080 --> 00:03:22,700
We can write, simply apply.

58
00:03:23,030 --> 00:03:29,660
And here inside where python this common arguments and what this essentially does, it uses arguments

59
00:03:29,660 --> 00:03:30,650
from this function.

60
00:03:30,770 --> 00:03:33,050
And here this and this you can see here.

61
00:03:33,050 --> 00:03:34,370
I also wrote Params.

62
00:03:34,370 --> 00:03:40,610
We're not using them for now, but if you get the task to extend manager with some field, you can write

63
00:03:40,610 --> 00:03:40,870
here.

64
00:03:40,920 --> 00:03:44,630
This, for example, image equals params dot image.

65
00:03:44,840 --> 00:03:47,960
And in this case, you must also pass in your manager and image.

66
00:03:48,200 --> 00:03:51,590
This is totally possible, but we don't need it for our task.

67
00:03:51,620 --> 00:03:55,220
This is why we simply use here and apply this argument.

68
00:03:55,490 --> 00:04:00,500
And what it does, it literally makes an extend partially of our employer.

69
00:04:00,740 --> 00:04:05,240
So as you can see here, we have this hidden name and actually where Colin dysfunction.

70
00:04:05,450 --> 00:04:11,360
But we're giving it another context where given inside the context of our manager and all arguments

71
00:04:11,360 --> 00:04:12,230
from this function.

72
00:04:12,800 --> 00:04:18,380
But here is a huge difference that I want to show you actually, when we're jump into the browser and

73
00:04:18,380 --> 00:04:20,330
right in here, manager prototype.

74
00:04:20,510 --> 00:04:26,630
You can see here on a constructor function, but here if I will write employee prototype, you can see

75
00:04:26,630 --> 00:04:32,450
here all the functions that were shared previously here on the top because actually this single line

76
00:04:32,600 --> 00:04:35,090
is just calling the constructor simply.

77
00:04:35,300 --> 00:04:41,180
It doesn't have anything to do with this prototype, which actually means this functions ANZ prototype

78
00:04:41,180 --> 00:04:43,850
of employee and manager doesn't get them.

79
00:04:44,090 --> 00:04:47,000
And this is super important because we're extending this class.

80
00:04:47,240 --> 00:04:53,270
This means that we want to have them directly inside our prototype and we want to copy them how we can

81
00:04:53,270 --> 00:04:53,660
do that.

82
00:04:53,810 --> 00:04:57,590
We can write here manager doored prototype equals.

83
00:04:57,890 --> 00:05:04,670
And here we want to use object create because we want to clone our employee prototype and inside were

84
00:05:04,670 --> 00:05:11,480
passing our employee Dorte prototype in this case, were cloning in all this functions from our employee

85
00:05:11,690 --> 00:05:13,580
to our prototype of manager.

86
00:05:13,820 --> 00:05:15,560
So let's check what we're getting here.

87
00:05:15,560 --> 00:05:19,160
I'm reloading the page and right in here, manager or prototype?

88
00:05:19,250 --> 00:05:23,660
And as you can see, this is now a copy of our employee and we can do it here.

89
00:05:23,660 --> 00:05:26,450
Manager prototype build get data, for example.

90
00:05:26,570 --> 00:05:26,840
And.

91
00:05:26,910 --> 00:05:28,350
We're getting this method.

92
00:05:28,560 --> 00:05:34,380
Obviously, it is undefined because this is not an instance about a class, but we have access to this

93
00:05:34,380 --> 00:05:35,230
method inside.

94
00:05:35,580 --> 00:05:37,410
But here is also a huge problem.

95
00:05:37,650 --> 00:05:42,750
One we're right in here, manager the prototype dubbed constructor where getting the constructor of

96
00:05:42,750 --> 00:05:45,810
our employee and not manager and this is wrong.

97
00:05:46,080 --> 00:05:47,730
This is what we must right here.

98
00:05:47,730 --> 00:05:51,000
Also Manager Dot Prototype Dot Constructor.

99
00:05:51,330 --> 00:05:54,150
And we want to sign here our manager function.

100
00:05:54,360 --> 00:05:56,970
In this case, it will be 100 percent correct.

101
00:05:57,150 --> 00:06:00,090
And as you can see, we're getting reference to our manager.

102
00:06:00,330 --> 00:06:05,250
So these are two lines which are super important when you are doing the stand with prototypes because

103
00:06:05,250 --> 00:06:07,920
first of all, you want to get the letters from our employee.

104
00:06:08,070 --> 00:06:11,700
And secondly, you need to override constructor back to our manager.

105
00:06:11,970 --> 00:06:14,690
And now we can use said department and get department.

106
00:06:14,700 --> 00:06:17,070
This is exactly the same like it was previously.

107
00:06:17,310 --> 00:06:19,290
It is manager or prototype.

108
00:06:19,500 --> 00:06:25,110
And here we are signing our said department and here manager dot prototype dot get department.

109
00:06:25,320 --> 00:06:30,420
And here, of course, we need to write the function key word and exactly the same should be here on

110
00:06:30,420 --> 00:06:30,870
the top.

111
00:06:31,260 --> 00:06:36,470
In this case, we successfully implemented manager just like it was done previously with classes.

112
00:06:36,540 --> 00:06:38,190
Let's realize our page and check.

113
00:06:38,460 --> 00:06:41,430
As you can see, we're getting our manager with ID and name.

114
00:06:41,610 --> 00:06:44,100
But we also have a function, said Department.

115
00:06:44,280 --> 00:06:46,710
We can write, for example, here development.

116
00:06:46,950 --> 00:06:52,140
And now we're having said manager also development and we have a nice kid department function.

117
00:06:52,380 --> 00:06:58,320
And obviously, we can use the same function, for example, get it from our parent and it is also working.

118
00:06:58,680 --> 00:07:04,080
So this is your typical of religious prototypes and implement classes with native prototypes and so

119
00:07:04,090 --> 00:07:04,710
JavaScript.