Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,300 --> 00:00:01,290
Welcome back, guys.
2
00:00:02,320 --> 00:00:10,600
In this lesson, I'm going to take a deeper dive into writing methods on classes, because right now
3
00:00:10,600 --> 00:00:19,060
is actually a good opportunity for us to explore a very fundamental thing in not only JavaScript, but
4
00:00:19,060 --> 00:00:20,650
also in react.
5
00:00:21,400 --> 00:00:26,890
And that's the idea of writing our own methods on our class components.
6
00:00:29,510 --> 00:00:38,030
Right now, we pass in this anonymous function into our search box handle change in order to set our
7
00:00:38,030 --> 00:00:42,800
state and we know that we've seen the this keyword a couple of times now.
8
00:00:43,840 --> 00:00:45,850
What is it actually representing?
9
00:00:46,480 --> 00:00:54,640
Well, this is a special keyword in JavaScript that references the context in which it's being invoked.
10
00:00:54,820 --> 00:00:55,660
So what does that mean?
11
00:00:56,320 --> 00:01:04,390
Well, when I say this dot state, we know that I'm trying to reference the state on our component.
12
00:01:04,390 --> 00:01:04,660
Right.
13
00:01:04,690 --> 00:01:05,770
Our class component.
14
00:01:06,280 --> 00:01:13,240
The only reason that JavaScript is able to say, oh, when we're calling this DOT state, I want the
15
00:01:13,240 --> 00:01:21,910
state object on our component is because the this keyword is set to the context of our class component.
16
00:01:23,440 --> 00:01:31,000
Now, the weird thing is that in JavaScript, when we write our own class methods, we'll see that the
17
00:01:31,000 --> 00:01:36,550
this keyword actually gets bound differently depending on how we write the class method.
18
00:01:37,540 --> 00:01:44,050
Now, we've already seen class methods in our app component when we look at, say, the component amount
19
00:01:44,050 --> 00:01:50,170
mount, which is a lifecycle method, as well as the render an inside of these methods, they take this
20
00:01:50,170 --> 00:01:54,280
format where it's the function name the brackets and then the squiggly brackets.
21
00:01:54,520 --> 00:01:56,050
But the this keyword is bound.
22
00:01:56,590 --> 00:02:02,110
Now, the reason that this is actually happening where the this context is getting bound inside of these
23
00:02:02,110 --> 00:02:10,780
methods is because when we call super, we're actually extending the functionality that exists on component,
24
00:02:10,780 --> 00:02:16,870
which we get from react that has these lifecycle methods and render because we didn't write them.
25
00:02:17,200 --> 00:02:23,020
We're like borrowing them from component and when we borrow them from component, component actually
26
00:02:23,020 --> 00:02:28,120
sets the context of this inside of them for us to our class components.
27
00:02:28,780 --> 00:02:31,630
If we were to write our own method, for example.
28
00:02:33,280 --> 00:02:35,770
To represent this method that we're passing in.
29
00:02:36,870 --> 00:02:39,670
We would have to be careful about how we write it.
30
00:02:40,260 --> 00:02:45,810
Now, let me show you now the reason in the first place we even want to rewrite this method in its own
31
00:02:45,810 --> 00:02:50,490
class method is because there's a chance that we might want to use it more than one place.
32
00:02:50,670 --> 00:02:52,720
And we don't want to write code more than once.
33
00:02:53,040 --> 00:02:58,410
We just want to put it in one place, pass it in, and then change it in one place if we have to, and
34
00:02:58,410 --> 00:03:00,230
not have to change it in multiple places.
35
00:03:01,020 --> 00:03:06,420
Now, how we would do this is we would write this handle change method here, right?
36
00:03:06,540 --> 00:03:08,490
Taking the same format that we see.
37
00:03:09,450 --> 00:03:14,310
And it would take some event, right, which is the synthetic event we're getting back from our input,
38
00:03:14,310 --> 00:03:15,180
as you remember.
39
00:03:16,890 --> 00:03:19,280
And then we call this sad state in it.
40
00:03:21,890 --> 00:03:26,030
And now we're able to actually pass handle change into.
41
00:03:27,020 --> 00:03:30,230
Our handle change property on our search box.
42
00:03:31,720 --> 00:03:36,580
Now, we can write it like this because we're passing the whole callback through to it.
43
00:03:37,480 --> 00:03:43,780
Right is being referenced in the function definition, so we even though earlier we were explicitly
44
00:03:43,780 --> 00:03:50,470
writing it out like this, this is the same equivalent thing because this door handle change is referencing
45
00:03:50,470 --> 00:03:53,050
this full function with the e-signature.
46
00:03:54,440 --> 00:03:59,690
But if we were to save this, we'll actually see that our original conversation, which is about the
47
00:03:59,720 --> 00:04:02,030
this context is undefined.
48
00:04:03,030 --> 00:04:09,030
If we start typing, we'll see that we get an error, it says, that cannot read properly set state
49
00:04:09,300 --> 00:04:13,090
of undefined and it seems that this is undefined.
50
00:04:13,890 --> 00:04:14,920
Well, why is this?
51
00:04:15,870 --> 00:04:20,220
Well, this is actually has to do with the way the functions behave in JavaScript.
52
00:04:21,760 --> 00:04:25,180
When we put handle change on our app.
53
00:04:26,720 --> 00:04:32,840
All it knows is that if we say this not handle change inside the context of our app, it points to this
54
00:04:32,840 --> 00:04:37,210
function, but it doesn't actually set the context of this.
55
00:04:38,120 --> 00:04:47,080
The reason for this is because JavaScript by default, doesn't set its scope of this on functions.
56
00:04:47,660 --> 00:04:53,940
You have to actually explicitly state what context you want this to be for us.
57
00:04:54,080 --> 00:04:55,490
We want this to be.
58
00:04:57,550 --> 00:05:05,440
Our app component and the method in which we can do it is to define it in our constructor because our
59
00:05:05,440 --> 00:05:09,670
constructor is the code that runs first before anything gets called.
60
00:05:09,670 --> 00:05:09,910
Right.
61
00:05:09,940 --> 00:05:15,340
So we want to make sure that the context of this is correct in all of our methods before any code gets
62
00:05:15,340 --> 00:05:15,700
written.
63
00:05:16,450 --> 00:05:24,160
So what we could do is we could say this dot handle change is equal to this dot handle change, dot
64
00:05:24,310 --> 00:05:26,260
bind and then this.
65
00:05:27,350 --> 00:05:34,910
Now, what is defined behind what I find is a method on any function that returns a new function where
66
00:05:34,910 --> 00:05:41,930
the context of this is set to whatever we passed to it and the context of this that we're setting in
67
00:05:41,930 --> 00:05:42,890
handle change.
68
00:05:43,950 --> 00:05:44,610
Right here.
69
00:05:45,640 --> 00:05:52,990
Is the this keyword that is defined inside of our constructor, which knows that it's R component.
70
00:05:53,980 --> 00:05:59,560
And now if we save, we'll actually see that it'll work as it was before.
71
00:06:02,500 --> 00:06:08,950
This is actually a very verbose way of writing code, because that means that for every new class method
72
00:06:08,950 --> 00:06:10,880
that we write, we have to bind it.
73
00:06:11,290 --> 00:06:12,780
We don't want to have to do that.
74
00:06:13,060 --> 00:06:21,220
We can actually leverage its six arrow functions and a unique characteristic about them that allows
75
00:06:21,220 --> 00:06:29,560
them to set the context of this in whatever it was that declared it in the first place.
76
00:06:30,370 --> 00:06:31,320
So what do I mean?
77
00:06:32,140 --> 00:06:39,530
Well, Arrow functions automatically allow you to set this when this thing is defined.
78
00:06:40,150 --> 00:06:45,250
So when our component is getting run by JavaScript for the first time and it's like, oh, I got to
79
00:06:45,250 --> 00:06:51,460
instantiate this new app class, it checks inside and it sees that there's this handle change method
80
00:06:51,460 --> 00:06:53,310
that points to an arrow function.
81
00:06:53,680 --> 00:06:57,430
So then it defines the arrow function based on what code we've given it.
82
00:06:57,430 --> 00:06:57,730
Right.
83
00:06:58,180 --> 00:07:02,020
And the moment it sees the this keyword, it's like, oh, this is an arrow function.
84
00:07:02,350 --> 00:07:10,390
I'm going to automatically bind this to the place where this arrow function was defined in the first
85
00:07:10,390 --> 00:07:10,810
place.
86
00:07:11,320 --> 00:07:15,550
And the context of this arrow function is AR app component.
87
00:07:16,810 --> 00:07:23,010
So that's the crazy thing about aero functions is that you actually cannot called unbind on them.
88
00:07:23,350 --> 00:07:29,800
They automatically get what's called lexical scoping, which just means that they bind that this context
89
00:07:30,100 --> 00:07:33,130
to the place where they were defined in the first place.
90
00:07:33,790 --> 00:07:38,170
And we can actually see this now that it will continue to work.
91
00:07:39,090 --> 00:07:46,890
As it did before, right, even though we're not calling the Binde in the constructor anymore, so this
92
00:07:46,890 --> 00:07:49,800
is really handy for us because it saves us that extra step.
93
00:07:53,120 --> 00:07:57,980
In order for me to prove that this is lexical scoping, another way I can show you is inside of our
94
00:07:57,980 --> 00:08:02,660
browser, the highest level context is our window object.
95
00:08:03,950 --> 00:08:05,660
If I were to define a function.
96
00:08:06,570 --> 00:08:14,820
Called New Funk, and what we're logging is console dot, log this when we invoke new funk.
97
00:08:15,970 --> 00:08:24,070
We'll see that this is that window object when JavaScript saw us define new func to this function and
98
00:08:24,070 --> 00:08:29,350
brought it into existence within our JavaScript context so we could start using it.
99
00:08:30,010 --> 00:08:39,669
It had to lexically scope this to the window object because the window object was the context in which
100
00:08:39,700 --> 00:08:44,950
our new function, our aero function was given its existence.
101
00:08:45,700 --> 00:08:49,120
This is the same case with our handle change method.
102
00:08:50,110 --> 00:08:58,960
When handle change was declared, which means that when JavaScript first created our app component.
103
00:09:00,490 --> 00:09:07,450
It also defined all of the methods on our components, including handle change, and it saw that this
104
00:09:07,450 --> 00:09:08,590
was an arrow function.
105
00:09:09,340 --> 00:09:17,500
And because of this, when this arrow function came into existence to JavaScript, it was going to bind
106
00:09:17,710 --> 00:09:26,320
any references to this inside of it, to the context in which it was defined, which is our app component.
107
00:09:27,410 --> 00:09:34,100
Just like we saw with our my funk in the browser, that's what happened with our handle change.
108
00:09:35,070 --> 00:09:41,340
And this is great, because if we want to right class methods, we just write them with this arrow syntax
109
00:09:41,730 --> 00:09:49,020
and now the context of this is what we expect it to be without us having to write all of that extensive
110
00:09:49,020 --> 00:09:52,170
binding code if we were to write it the other way.
111
00:09:53,220 --> 00:10:01,140
So with this in mind, it makes it easier for us to write our class components and their methods.
11632
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.