1 00:00:00,330 --> 00:00:06,780 In this beautiful will look on all questions which are related to this and context inside JavaScript. 2 00:00:07,080 --> 00:00:09,150 And you might get some question like this. 3 00:00:09,480 --> 00:00:10,920 What will be locked here? 4 00:00:14,180 --> 00:00:18,420 And the first task that you are getting, you have a function with function, key word. 5 00:00:18,440 --> 00:00:19,250 This is important. 6 00:00:19,580 --> 00:00:22,580 And now inside, we're just right in console.log this. 7 00:00:22,880 --> 00:00:24,530 And now we're calling it item. 8 00:00:24,770 --> 00:00:29,900 So the question is what we will see inside our console.log and actually in browser, you can see that 9 00:00:29,900 --> 00:00:31,040 we're seeing a window. 10 00:00:31,280 --> 00:00:33,890 And you might think, OK, inside functions. 11 00:00:34,160 --> 00:00:37,820 This is always reference and window, but this is not correct. 12 00:00:37,940 --> 00:00:41,570 Inside functions, this is referencing the global object. 13 00:00:41,720 --> 00:00:42,790 It may be window. 14 00:00:42,800 --> 00:00:45,400 It may be undefined and it may be something else. 15 00:00:45,410 --> 00:00:47,060 It all depends on the context. 16 00:00:47,330 --> 00:00:53,690 But if you define the function key word directly in JavaScript code without any Neston, it will be 17 00:00:53,690 --> 00:00:54,260 a window. 18 00:00:54,500 --> 00:00:58,520 Now you get getting question number two, what will be locked in this case? 19 00:01:01,950 --> 00:01:08,600 As you can see here, we have an object item with title and get tied to method and inside cat item method 20 00:01:08,610 --> 00:01:10,110 where console.log in this. 21 00:01:10,440 --> 00:01:12,960 And here were common item door to get item. 22 00:01:13,260 --> 00:01:19,050 And in the case with objects, when we have methods inside, objects were always referenced in this 23 00:01:19,050 --> 00:01:19,500 object. 24 00:01:19,770 --> 00:01:25,050 This means when were allowed in the page, we're getting this and this is our object with title and 25 00:01:25,050 --> 00:01:25,680 get item. 26 00:01:25,800 --> 00:01:32,190 In this case, we can use all properties inside our object because they're available for us inside this. 27 00:01:32,490 --> 00:01:37,230 So when we are talking about objects, this always references our object. 28 00:01:37,440 --> 00:01:39,510 So here is our task number three. 29 00:01:39,520 --> 00:01:41,550 What will be logged in this case? 30 00:01:44,730 --> 00:01:47,700 As you can see here, we have not an object, but a class. 31 00:01:47,940 --> 00:01:51,660 And we also have inside the title and get tied to method. 32 00:01:51,870 --> 00:01:58,410 And we also have this inside now we're creating the instance of our class and we're call a tighter method 33 00:01:58,410 --> 00:01:59,760 from our instance. 34 00:02:00,120 --> 00:02:06,090 This is important to remember that inside methods in our class, when we have an instance, we have 35 00:02:06,090 --> 00:02:07,770 a reference to our instance. 36 00:02:08,070 --> 00:02:10,110 As you can see in the browser, here we have this. 37 00:02:10,290 --> 00:02:12,180 And we can use this word item. 38 00:02:12,390 --> 00:02:18,660 This actually means that this object is in the instance of our item class and inside we have our title 39 00:02:18,660 --> 00:02:23,040 ball so we can use all properties of this instance inside this. 40 00:02:23,220 --> 00:02:29,130 But now we're getting the question of what will happen if we will pick a function inside our method. 41 00:02:29,430 --> 00:02:35,040 So actually, what we're writing here is function, for example, some function and inside we are writing 42 00:02:35,040 --> 00:02:35,940 this console.log. 43 00:02:36,210 --> 00:02:41,700 And after this, we're just calling our some function, which actually means we define the function 44 00:02:41,790 --> 00:02:44,220 with function key word inside our method. 45 00:02:44,400 --> 00:02:46,320 And we're calling it here directly. 46 00:02:46,560 --> 00:02:49,650 The question is what will be console.log to inside this? 47 00:02:53,000 --> 00:02:58,970 As you can see in trousered, this is undefined because, as I said, inside functions were not referenced 48 00:02:58,970 --> 00:03:05,360 in the window but were referencing in global object and actually window covered always is reference 49 00:03:05,360 --> 00:03:06,380 in global object. 50 00:03:06,560 --> 00:03:10,100 So in this case, it will never reference our instance. 51 00:03:10,100 --> 00:03:16,100 And this is important to remember, which means if you have a function inside your class, these inside 52 00:03:16,100 --> 00:03:17,060 won't be correct. 53 00:03:17,270 --> 00:03:22,430 It won't be a reference in our instance of the class, and we can't use properties of it. 54 00:03:22,700 --> 00:03:24,170 And exactly the same problem. 55 00:03:24,170 --> 00:03:27,260 You will have not just was defined in the function like this. 56 00:03:27,470 --> 00:03:32,570 But if you are writing, for example, a map for Ray inside your get item. 57 00:03:32,720 --> 00:03:36,080 And here you have a function for every single item. 58 00:03:36,260 --> 00:03:41,150 Now, if we will write console.log this inside, it will also be not correct. 59 00:03:41,480 --> 00:03:47,180 As you can see in browser overload and page were get undefined at three times because here we are using 60 00:03:47,210 --> 00:03:49,820 function, keyword and insert function. 61 00:03:49,820 --> 00:03:51,490 It is reference and undefined. 62 00:03:51,860 --> 00:03:53,900 So both these words are problematic. 63 00:03:54,050 --> 00:03:58,610 And now the question is how we can fix it and get the reference to this. 64 00:03:59,030 --> 00:04:00,830 And we have two solutions for this. 65 00:04:01,040 --> 00:04:06,350 First of all, solution, which is older and it is also used when are built in JavaScript. 66 00:04:06,350 --> 00:04:12,920 All the version for this we can simply define before this, for example, was underscore and where sign 67 00:04:12,920 --> 00:04:15,650 in here reference to our this and this. 68 00:04:15,770 --> 00:04:19,010 This will be correct because we're inside our method. 69 00:04:19,220 --> 00:04:20,240 Now we can cancel. 70 00:04:20,240 --> 00:04:24,830 OK, here, not this, because here the reference is strong, but this was underscore. 71 00:04:25,130 --> 00:04:27,140 And here we have another reference. 72 00:04:27,350 --> 00:04:28,550 Now let's to load the page. 73 00:04:28,550 --> 00:04:32,780 As you can see, we have a correct reference to our instance of our item. 74 00:04:33,050 --> 00:04:37,850 So this is typically older approach and it is used in the build step of JavaScript. 75 00:04:38,200 --> 00:04:43,040 The better approach will be to use a narrow function here instead of function keyword. 76 00:04:43,100 --> 00:04:46,670 So we can simply use here arrow function from ActionScript six. 77 00:04:46,820 --> 00:04:51,710 And now, when we are console.log an inside out this, it will have the correct reference. 78 00:04:51,950 --> 00:04:57,920 As you can see, the result is exactly the same because arrow function is get in the context of our 79 00:04:57,920 --> 00:05:03,230 parent, which actually means from here we get in context that we have inside gate item. 80 00:05:03,500 --> 00:05:06,170 And here we have a reference to our instance. 81 00:05:06,440 --> 00:05:12,140 This is why I highly recommend you to always use arrow functions and not function keywords, and then 82 00:05:12,140 --> 00:05:14,240 you won't have any problems with context. 83 00:05:14,420 --> 00:05:19,610 So to sum this up inside function keyword, you always have a reference to a global object. 84 00:05:19,820 --> 00:05:23,270 Inside objects, you have a reference to the object and self. 85 00:05:23,510 --> 00:05:29,420 In classes, you have a reference to the instance of the class and inside function inside, for example, 86 00:05:29,420 --> 00:05:31,460 method or directly insert class. 87 00:05:31,580 --> 00:05:33,580 It will be a reference to define it.