1
00:00:00,570 --> 00:00:03,970
Now let's see what happens when we bring the key word this back into the mix.

2
00:00:04,170 --> 00:00:06,980
Here's where things get fun in the first code block.

3
00:00:07,020 --> 00:00:12,810
We have a method called Say hi which is a function that calls a set timeout and cancelled out logs the

4
00:00:12,810 --> 00:00:17,740
string high concatenated with the value of the first name property on the keyword.

5
00:00:17,820 --> 00:00:21,100
This before we see what this code returns.

6
00:00:21,150 --> 00:00:24,740
Pause the video and think about what the key word this refers to.

7
00:00:24,780 --> 00:00:28,550
Go back to the first two rules is the key word this in the global context.

8
00:00:28,710 --> 00:00:32,280
Or is the key word this inside of a declared object.

9
00:00:32,280 --> 00:00:36,480
You might be thinking it's clearly inside of a declared object and you are right.

10
00:00:36,750 --> 00:00:42,960
However since the set timeout is called at a later point in time the keyword this does not refer to

11
00:00:42,960 --> 00:00:44,310
the parent object.

12
00:00:44,310 --> 00:00:47,100
It actually refers to the global object.

13
00:00:47,100 --> 00:00:50,060
This is very tricky and trips up lots of beginners.

14
00:00:50,160 --> 00:00:55,470
So let's walk through it again since the set timeout is called at a later point in time.

15
00:00:55,590 --> 00:01:01,350
The object that it is attached to is actually the window just like we said before set time out is a

16
00:01:01,350 --> 00:01:07,920
method on the window object even though it's defined inside of the cold object when it's declared the

17
00:01:07,920 --> 00:01:13,960
context in which the function is executed is actually the global context.

18
00:01:13,980 --> 00:01:18,000
So how can we solve this problem since we're losing the correct context of the key word.

19
00:01:18,010 --> 00:01:22,220
This we should explicitly set but we want the key word this to refer to.

20
00:01:22,590 --> 00:01:27,810
We can do this using call and apply but since we want to call the function at a later point in time

21
00:01:28,260 --> 00:01:30,510
we don't want to use either of those.

22
00:01:30,570 --> 00:01:33,600
Remember that call and apply invoke the function right away.

23
00:01:33,660 --> 00:01:38,640
So doing that would defeat the purpose of a set time out which is for executing a function at a later

24
00:01:38,640 --> 00:01:39,620
point in time.

25
00:01:39,960 --> 00:01:46,080
So that leaves us with bind in the second code block we can solve our problem by passing in as the first

26
00:01:46,080 --> 00:01:47,700
parameter to the bind method.

27
00:01:47,700 --> 00:01:53,640
The value that we want the keyword this to refer to you may be totally confused as to why we pass in

28
00:01:53,640 --> 00:01:56,010
the keyword this as the first parameter.

29
00:01:56,160 --> 00:02:01,950
But take a step back and ask yourself inside of the code object what does the keyword this refer to

30
00:02:01,960 --> 00:02:02,420
.

31
00:02:02,850 --> 00:02:06,140
Well it actually refers to the cult object itself.

32
00:02:06,240 --> 00:02:12,450
So we are binding the correct value of the keyword this to be what we want when the function inside

33
00:02:12,450 --> 00:02:18,150
of set time out is called instead of the keyword this you can pass in the variable called to the bind

34
00:02:18,150 --> 00:02:20,160
method and you will get the same result.

35
00:02:20,400 --> 00:02:24,790
But more commonly you will see code that uses the keyword this.

36
00:02:24,900 --> 00:02:30,600
To recap we saw that the bind method returns a function definition unlike call an apply and is very

37
00:02:30,600 --> 00:02:36,300
useful for setting the value of the keyword this when we do not know all of the values for arguments

38
00:02:36,300 --> 00:02:41,060
to pass to the function or when we are working with asynchronous code.

39
00:02:41,070 --> 00:02:42,300
One final note.

40
00:02:42,390 --> 00:02:44,960
The material we're covering here is quite advanced.

41
00:02:45,150 --> 00:02:48,900
But if you're looking to become a professional javascript developer this is the kind of code you'll

42
00:02:48,900 --> 00:02:53,910
see in production code bases as well as get asked about in interviews if you're still quite tripped

43
00:02:53,910 --> 00:02:54,920
up with this example.

44
00:02:54,930 --> 00:02:55,710
Don't worry.

45
00:02:55,830 --> 00:03:00,570
I've taught this topic a lot and it's always something that confuses people at first try to walk through

46
00:03:00,600 --> 00:03:05,580
each line of code and make sure you type the examples in the chrome console to see what's going on.

47
00:03:05,760 --> 00:03:07,950
As always feel free to ask those questions.

48
00:03:07,950 --> 00:03:10,600
We're here to help you learn in the next video.

49
00:03:10,740 --> 00:03:15,060
We're going to briefly cover the last rule for determining the key word this so either