1
00:00:02,400 --> 00:00:10,000
In this application, we get a couple of classes - product item, product list and also shopping cart and

2
00:00:10,020 --> 00:00:16,680
what they all have in common is that they have a render method and in that render method, we do different

3
00:00:16,680 --> 00:00:20,410
things but we always create a new element,

4
00:00:20,520 --> 00:00:25,770
we then add stuff to that element, for example with innerHTML,

5
00:00:25,950 --> 00:00:28,380
we then return that element.

6
00:00:28,530 --> 00:00:30,690
Now we duplicate that logic,

7
00:00:30,690 --> 00:00:35,720
of course the exact configuration, for example the class name and the tag, that differs

8
00:00:35,730 --> 00:00:38,670
but the general logic always is the same.

9
00:00:38,670 --> 00:00:45,220
So whilst we do have different logic for what we then add to this element, the creation and configuration

10
00:00:45,240 --> 00:00:53,790
basically as I just said multiple times is the same and in such cases, we can use a concept called inheritance,

11
00:00:53,820 --> 00:00:59,880
which we can use in many programming languages and Javascript is no exception, to conveniently share

12
00:00:59,880 --> 00:01:01,650
code amongst classes.

13
00:01:01,650 --> 00:01:03,520
Now let's explore that concept.

14
00:01:03,690 --> 00:01:09,390
The idea behind inheritance is that we have some base class, let's say a post if we're building a social

15
00:01:09,390 --> 00:01:13,620
network, which holds a couple of properties and/or methods,

16
00:01:13,650 --> 00:01:19,740
in this example three properties, which we also need in other classes. Let's say we have a specialized

17
00:01:19,740 --> 00:01:25,890
version of that post which is an image post which also has all these properties but also in addition

18
00:01:25,890 --> 00:01:31,590
has an imageUrl and an image description and then we also have another specialized version of a

19
00:01:31,590 --> 00:01:38,250
post you can make, a video post which also has title, text and creatorId but which then also needs a video

20
00:01:38,250 --> 00:01:44,130
URL and let's say a rating regarding the age you've got to have to watch the video. So we can of

21
00:01:44,130 --> 00:01:50,160
course build multiple classes but that's suboptimal because we duplicate a lot of code, all that purple

22
00:01:50,160 --> 00:01:55,100
code - title, text, creatorId, these properties we duplicate them all the time.

23
00:01:55,260 --> 00:02:01,950
So instead it would be nice if you could extend that base class and of course you can do that in Javascript

24
00:02:02,400 --> 00:02:09,840
and therefore inherit all that purple stuff. So you can extend that class and then you get this shared

25
00:02:09,930 --> 00:02:16,860
purple content automatically in the specialized classes and you can still add your old extra properties

26
00:02:16,860 --> 00:02:19,880
or logic in these subclasses here,

27
00:02:19,980 --> 00:02:26,970
you can also override things shared in the base class if you would want to do that. And now that's something

28
00:02:26,970 --> 00:02:28,140
we can utilize here,

29
00:02:28,140 --> 00:02:32,810
this concept of inheritance is something we can utilize here in our project as well.