Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,280 --> 00:00:06,110
So we learned about constructor functions and ESX classes.
2
2
00:00:06,110 --> 00:00:08,380
But there is actually a third way
3
3
00:00:08,380 --> 00:00:12,440
of implementing prototypal inheritance or delegation,
4
4
00:00:12,440 --> 00:00:14,540
as we can also call it.
5
5
00:00:14,540 --> 00:00:16,540
And that third way is
6
6
00:00:16,540 --> 00:00:20,060
to use a function called Object.create,
7
7
00:00:20,060 --> 00:00:22,810
which works in a pretty different way
8
8
00:00:22,810 --> 00:00:25,793
than constructor functions and classes work.
9
9
00:00:27,770 --> 00:00:30,150
Now, with Object.create,
10
10
00:00:30,150 --> 00:00:34,200
there is still the idea of prototypal inheritance.
11
11
00:00:34,200 --> 00:00:38,240
However, there are no prototype properties involved.
12
12
00:00:38,240 --> 00:00:43,220
And also no constructor functions, and no new operator.
13
13
00:00:43,220 --> 00:00:46,870
So instead, we can use Object.create
14
14
00:00:46,870 --> 00:00:51,200
to essentially manually set the prototype of an object,
15
15
00:00:51,200 --> 00:00:54,450
to any other object that we want.
16
16
00:00:54,450 --> 00:00:59,240
Okay, so if we can set the prototype to any object,
17
17
00:00:59,240 --> 00:01:01,293
let's actually create an object
18
18
00:01:01,293 --> 00:01:05,710
that we want to be the prototype of all the person objects.
19
19
00:01:05,710 --> 00:01:09,030
So essentially, let's recreate the person class
20
20
00:01:09,030 --> 00:01:14,030
from earlier, so let's say, person,
21
21
00:01:14,740 --> 00:01:16,910
and I'm calling it person PersonProto,
22
22
00:01:16,910 --> 00:01:18,960
which stands for prototype.
23
23
00:01:18,960 --> 00:01:20,480
Because, again,
24
24
00:01:20,480 --> 00:01:23,720
this object is gonna be literally the prototype
25
25
00:01:23,720 --> 00:01:25,533
of all the person objects.
26
26
00:01:27,760 --> 00:01:32,090
And now, this is actually just a simple object literal.
27
27
00:01:32,090 --> 00:01:34,973
And so now, what should we actually put in here?
28
28
00:01:36,380 --> 00:01:39,130
We're gonna put exactly what we put before
29
29
00:01:39,130 --> 00:01:41,460
into the prototype property.
30
30
00:01:41,460 --> 00:01:44,413
And so that was the CalcAge method.
31
31
00:01:46,100 --> 00:01:49,790
So we did that, actually here first manually.
32
32
00:01:49,790 --> 00:01:54,510
So we added CalcAge to the prototype property of person.
33
33
00:01:54,510 --> 00:01:56,793
And then here, we also did that,
34
34
00:01:58,130 --> 00:02:00,700
but in a more implicit way.
35
35
00:02:00,700 --> 00:02:04,310
So JavaScript did that for us behind the scenes.
36
36
00:02:04,310 --> 00:02:06,780
But now let's take this function here.
37
37
00:02:06,780 --> 00:02:08,940
Or actually, we can take all of this,
38
38
00:02:08,940 --> 00:02:12,480
because we can also write methods in this way,
39
39
00:02:12,480 --> 00:02:13,993
in object literals.
40
40
00:02:15,160 --> 00:02:17,593
And so that's actually it.
41
41
00:02:18,970 --> 00:02:20,400
That's all the methods
42
42
00:02:20,400 --> 00:02:23,540
that we want the person objects to inherit.
43
43
00:02:23,540 --> 00:02:25,760
And so we put them in the prototype.
44
44
00:02:25,760 --> 00:02:27,193
And now all we need to do is
45
45
00:02:27,193 --> 00:02:29,780
to actually create a person object
46
46
00:02:29,780 --> 00:02:33,630
with this object here as the prototype.
47
47
00:02:33,630 --> 00:02:36,773
And for that, we can use Object.create.
48
48
00:02:38,130 --> 00:02:40,683
So let's create a person called Steven here.
49
49
00:02:42,620 --> 00:02:45,333
And so now, Object.create.
50
50
00:02:46,220 --> 00:02:49,040
And here we pass in the object that we want
51
51
00:02:49,040 --> 00:02:51,903
to be the prototype of the new object.
52
52
00:02:53,380 --> 00:02:56,793
So that's PersonProto.
53
53
00:02:57,770 --> 00:03:00,538
And so this will now return a brand new object,
54
54
00:03:00,538 --> 00:03:05,060
that is linked to the prototype that we passed in here.
55
55
00:03:05,060 --> 00:03:09,390
So Steven here is right now an empty object.
56
56
00:03:09,390 --> 00:03:13,190
And it will be linked to this PersonProto object,
57
57
00:03:13,190 --> 00:03:15,810
which will be its prototype.
58
58
00:03:15,810 --> 00:03:17,930
And we can actually already see
59
59
00:03:17,930 --> 00:03:19,323
that here in the console.
60
60
00:03:20,570 --> 00:03:23,820
So as I said, For now, it is empty.
61
61
00:03:23,820 --> 00:03:26,250
But we already have the prototype.
62
62
00:03:26,250 --> 00:03:28,603
And in there, we see we have CalcAge.
63
63
00:03:31,920 --> 00:03:35,860
But now we don't have any properties on the object yet.
64
64
00:03:35,860 --> 00:03:38,850
So let's quickly fix that.
65
65
00:03:38,850 --> 00:03:42,000
So Stephen.name.
66
66
00:03:42,000 --> 00:03:43,230
So I'm doing it here,
67
67
00:03:43,230 --> 00:03:47,323
just like I would do in any other object literal.
68
68
00:03:49,070 --> 00:03:51,743
And so this is not ideal, of course.
69
69
00:03:52,900 --> 00:03:55,700
But we're gonna fix that in a minute.
70
70
00:03:55,700 --> 00:03:59,470
Because of course, we want actually a programmatic way
71
71
00:03:59,470 --> 00:04:01,370
of creating new objects,
72
72
00:04:01,370 --> 00:04:03,723
instead of having to do it like this.
73
73
00:04:04,560 --> 00:04:05,570
But again, for now,
74
74
00:04:05,570 --> 00:04:08,390
we are just worried about the prototypes
75
75
00:04:08,390 --> 00:04:10,700
and the prototype chain here.
76
76
00:04:10,700 --> 00:04:14,890
So we should now be able to say Stephen.CalcAge,
77
77
00:04:17,850 --> 00:04:21,260
and, yeah, that worked.
78
78
00:04:21,260 --> 00:04:24,188
And so you see that we just like before,
79
79
00:04:24,188 --> 00:04:26,780
implemented prototypal inheritance,
80
80
00:04:26,780 --> 00:04:28,913
but in a completely different way.
81
81
00:04:29,940 --> 00:04:31,782
And now, just to make sure that we're all
82
82
00:04:31,782 --> 00:04:33,650
on the same page here,
83
83
00:04:33,650 --> 00:04:36,100
let's make sure that we really understand
84
84
00:04:36,100 --> 00:04:37,730
this big difference.
85
85
00:04:37,730 --> 00:04:40,080
And so let's take a look at a diagram
86
86
00:04:40,080 --> 00:04:42,223
of what's really going on here.
87
87
00:04:44,330 --> 00:04:45,960
So here at the right side,
88
88
00:04:45,960 --> 00:04:49,560
we have the way it works where de constructor functions,
89
89
00:04:49,560 --> 00:04:53,210
just as we have been doing it up until this point.
90
90
00:04:53,210 --> 00:04:55,350
So when we use the new operator
91
91
00:04:55,350 --> 00:04:58,180
in constructor functions or classes,
92
92
00:04:58,180 --> 00:05:00,800
it automatically sets the prototype
93
93
00:05:00,800 --> 00:05:03,430
of the instances to the constructors,
94
94
00:05:03,430 --> 00:05:04,803
prototype property.
95
95
00:05:06,350 --> 00:05:08,530
So this happens automatically.
96
96
00:05:08,530 --> 00:05:11,423
And so that's nothing new at this point for you.
97
97
00:05:12,260 --> 00:05:15,930
Now, on the other hand, with Object.create,
98
98
00:05:15,930 --> 00:05:19,410
we can set the prototype of objects manually
99
99
00:05:19,410 --> 00:05:21,920
to any object that we want.
100
100
00:05:21,920 --> 00:05:22,920
And in this case,
101
101
00:05:22,920 --> 00:05:24,760
we manually set the prototype
102
102
00:05:24,760 --> 00:05:29,280
of the Steven object to the person proto object.
103
103
00:05:29,280 --> 00:05:30,520
And that's it.
104
104
00:05:30,520 --> 00:05:31,780
Now the two objects
105
105
00:05:31,780 --> 00:05:35,190
are effectively linked through the proto property,
106
106
00:05:35,190 --> 00:05:37,480
just like before.
107
107
00:05:37,480 --> 00:05:39,270
So now looking at properties,
108
108
00:05:39,270 --> 00:05:41,670
or methods in a prototype chain,
109
109
00:05:41,670 --> 00:05:43,620
works just like it worked
110
110
00:05:43,620 --> 00:05:46,860
in function constructors, or classes.
111
111
00:05:46,860 --> 00:05:49,570
And so the prototype chain, in fact,
112
112
00:05:49,570 --> 00:05:51,920
looks exactly the same here.
113
113
00:05:51,920 --> 00:05:53,500
The big difference is
114
114
00:05:53,500 --> 00:05:56,004
that we didn't need any constructor function,
115
115
00:05:56,004 --> 00:05:59,016
and also no prototype property at all,
116
116
00:05:59,016 --> 00:06:02,320
to achieve the exact same thing.
117
117
00:06:02,320 --> 00:06:05,360
So this is actually a bit more straightforward,
118
118
00:06:05,360 --> 00:06:07,290
and a bit more natural.
119
119
00:06:07,290 --> 00:06:11,480
And I guess, that it might also be easier to understand.
120
120
00:06:11,480 --> 00:06:13,770
However, the reason why I'm showing you
121
121
00:06:13,770 --> 00:06:15,900
this Object.create technique,
122
122
00:06:15,900 --> 00:06:19,110
right at the end, is because in practice,
123
123
00:06:19,110 --> 00:06:20,350
in the real world,
124
124
00:06:20,350 --> 00:06:22,790
this is actually the least used way
125
125
00:06:22,790 --> 00:06:25,916
of implementing prototypal inheritance.
126
126
00:06:25,916 --> 00:06:28,490
However, it's still very important
127
127
00:06:28,490 --> 00:06:31,940
to know exactly how Object.create works,
128
128
00:06:31,940 --> 00:06:33,960
because you will still stumble upon
129
129
00:06:33,960 --> 00:06:36,020
this in the real world.
130
130
00:06:36,020 --> 00:06:37,715
And even more importantly,
131
131
00:06:37,715 --> 00:06:39,990
we will need Object.create
132
132
00:06:39,990 --> 00:06:42,436
to link prototypes in the next lecture,
133
133
00:06:42,436 --> 00:06:47,010
in order to implement inheritance between classes.
134
134
00:06:47,010 --> 00:06:50,270
So with that, we're gonna take object oriented programming
135
135
00:06:50,270 --> 00:06:52,100
to a whole new level.
136
136
00:06:52,100 --> 00:06:55,920
And the Object.create function is gonna be crucial in that,
137
137
00:06:55,920 --> 00:06:56,943
as we will see.
138
138
00:06:58,511 --> 00:07:02,930
And of course, we can now verify everything I just said,
139
139
00:07:02,930 --> 00:07:07,930
using CALT here. So we can do Steven.__Proto.
140
140
00:07:11,943 --> 00:07:14,533
And so that is now exactly the object
141
141
00:07:14,533 --> 00:07:16,293
that we specified up here.
142
142
00:07:17,360 --> 00:07:21,260
So you see, this is exactly PersonProto.
143
143
00:07:21,260 --> 00:07:22,683
And that makes sense,
144
144
00:07:23,590 --> 00:07:26,350
Because here, we said explicitly,
145
145
00:07:26,350 --> 00:07:28,800
that personal proto should in fact,
146
146
00:07:28,800 --> 00:07:30,503
be the prototype of Steven.
147
147
00:07:32,130 --> 00:07:34,510
And so therefore, this, of course,
148
148
00:07:34,510 --> 00:07:39,510
is gonna be true, and it is.
149
149
00:07:42,070 --> 00:07:45,189
So now that we know exactly what's going on here,
150
150
00:07:45,189 --> 00:07:47,633
let's quickly create another person.
151
151
00:07:48,710 --> 00:07:53,710
So const Sarah = Object.create.
152
152
00:07:57,420 --> 00:08:00,453
And once again, here, use PersonProto.
153
153
00:08:02,810 --> 00:08:06,150
But now, in order to set properties on this object,
154
154
00:08:06,150 --> 00:08:10,120
let's do it in a better way than what we did here.
155
155
00:08:10,120 --> 00:08:12,570
So doing this is a little bit weird.
156
156
00:08:12,570 --> 00:08:14,268
And it goes against the spirit
157
157
00:08:14,268 --> 00:08:17,520
of creating objects programmatically.
158
158
00:08:17,520 --> 00:08:21,020
So if we're serious about using Object.create,
159
159
00:08:21,020 --> 00:08:22,750
we should implement a function
160
160
00:08:22,750 --> 00:08:25,343
that basically does this work for us.
161
161
00:08:26,400 --> 00:08:29,517
So let's create a new method here.
162
162
00:08:29,517 --> 00:08:31,173
And this can have any name,
163
163
00:08:32,060 --> 00:08:33,970
so I will call it init.
164
164
00:08:33,970 --> 00:08:35,990
But this is going to be a little bit similar
165
165
00:08:35,990 --> 00:08:38,973
to the constructor, that we have in classes.
166
166
00:08:40,160 --> 00:08:42,780
So this one will also get a name,
167
167
00:08:42,780 --> 00:08:44,397
or let's say first name,
168
168
00:08:44,397 --> 00:08:46,563
and a birth year.
169
169
00:08:48,410 --> 00:08:49,980
And then just like before,
170
170
00:08:49,980 --> 00:08:52,960
we will use this property
171
171
00:08:52,960 --> 00:08:56,470
and set first name to first name,
172
172
00:08:56,470 --> 00:08:59,453
and then this.birth year,
173
173
00:09:00,310 --> 00:09:03,223
set it to birth year, as well.
174
174
00:09:04,120 --> 00:09:05,370
And so you see that
175
175
00:09:05,370 --> 00:09:08,220
this looks a bit like the constructor function
176
176
00:09:08,220 --> 00:09:09,713
that we created earlier.
177
177
00:09:11,130 --> 00:09:13,300
However, this has actually nothing
178
178
00:09:13,300 --> 00:09:16,370
to do with any constructor function,
179
179
00:09:16,370 --> 00:09:19,130
because we are not using the new operator
180
180
00:09:19,130 --> 00:09:24,027
to call this we will simply do Sarah.init
181
181
00:09:26,580 --> 00:09:29,320
and then we will pass in the arguments.
182
182
00:09:29,320 --> 00:09:33,553
So let's say Sarah, and 1979, for example.
183
183
00:09:37,010 --> 00:09:40,453
And so let's then use CalcAGe here as well.
184
184
00:09:42,730 --> 00:09:46,173
And so then, that just works beautifully as well.
185
185
00:09:47,540 --> 00:09:50,030
So here this keyword will of course,
186
186
00:09:50,030 --> 00:09:52,950
also points to the Sarah object now,
187
187
00:09:52,950 --> 00:09:57,720
but it does so because we explicitly called init on Sarah.
188
188
00:09:57,720 --> 00:09:59,520
So again, this has nothing to do
189
189
00:09:59,520 --> 00:10:03,250
with constructor functions that we saw earlier.
190
190
00:10:03,250 --> 00:10:04,990
And it's also completely different
191
191
00:10:04,990 --> 00:10:09,990
from the constructor method that we have in ESX classes.
192
192
00:10:10,240 --> 00:10:11,750
This is just a manual way
193
193
00:10:12,750 --> 00:10:15,860
of basically initializing the object.
194
194
00:10:15,860 --> 00:10:18,310
And this here could be any name.
195
195
00:10:18,310 --> 00:10:20,440
And indeed, we could have a method like
196
196
00:10:20,440 --> 00:10:23,053
this in any other object literal.
197
197
00:10:25,660 --> 00:10:30,210
So essentially, this is how Object.create works.
198
198
00:10:30,210 --> 00:10:32,440
So the big takeaway is
199
199
00:10:32,440 --> 00:10:35,670
that Object.create creates a new object,
200
200
00:10:35,670 --> 00:10:38,450
and the prototype of that object
201
201
00:10:38,450 --> 00:10:41,660
will be the object that we passed in.
202
202
00:10:41,660 --> 00:10:44,040
So that's what matters from this video.
203
203
00:10:44,040 --> 00:10:47,190
And that's very important to understand in the future,
204
204
00:10:47,190 --> 00:10:50,750
when we will implement true class inheritance because
205
205
00:10:50,750 --> 00:10:53,863
for that, we are gonna need Object.create.
17257
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.