WEBVTT 00:01.680 --> 00:08.460 You remember that in previous videos we have referred to the special care, this and in this lecture, 00:08.460 --> 00:11.550 I'm going to talk about what exactly this word means. 00:12.480 --> 00:18.840 It is also one of the important aspects in JavaScript, but at the same time, it's a bit confusing, 00:18.840 --> 00:20.910 especially for new JavaScript developers. 00:22.020 --> 00:24.370 The key word, this is very frequently used. 00:25.110 --> 00:30.420 So you need to really understand how it works under the hood of the program. 00:30.420 --> 00:32.760 Languages like Java C Sharp. 00:33.750 --> 00:35.180 Use this keyword as well. 00:35.580 --> 00:37.980 But in JavaScript it's a bit different topic. 00:39.240 --> 00:42.480 OK, let's recall what happens when the page is loaded. 00:42.990 --> 00:50.400 You already know that global execution context is created and it creates global window object anti's. 00:50.400 --> 00:54.210 And on global level this completely equals to window object. 00:56.280 --> 01:03.930 When we use this keyword inside a regular function in regular I mean usual function, which is not a 01:03.930 --> 01:05.850 method created inside an object. 01:06.510 --> 01:08.400 And then we invoke dysfunction. 01:09.450 --> 01:11.880 Local execution context is created. 01:13.020 --> 01:21.040 It defines this, which still refers to global window object, and in council we get window object. 01:22.080 --> 01:29.040 So again, in the regular functions, which are not the methods of an object, this keyword points to 01:29.040 --> 01:30.390 global window object. 01:32.600 --> 01:37.040 But when we deal with method in objects, then something different happens. 01:38.230 --> 01:46.360 Suppose that we have an object person with properties, first name and last name and method, get full 01:46.360 --> 01:51.670 name, which returns full name of a person in order to get a full name. 01:51.700 --> 01:55.570 We need to access first name and last name using dot operator. 01:56.590 --> 01:58.720 That's why you see here per dot. 01:58.720 --> 02:01.210 First name and last name. 02:02.490 --> 02:10.680 When we invoked this method, then we get John Smith in council, if we change person into this, then 02:10.680 --> 02:13.380 we will still get John Smith in council. 02:14.370 --> 02:19.440 So how this happened in previous example, this Keywood referred to global. 02:19.440 --> 02:27.690 We do object in this case when we call the method of object that the local execution context is created. 02:28.170 --> 02:29.940 It defies keyword this. 02:30.540 --> 02:33.650 But at this point it refers to object person. 02:34.770 --> 02:37.460 That's why we get the same result in council. 02:38.460 --> 02:45.810 So using keyword this insight, a method of object means that it completely equals to match an object. 02:47.640 --> 02:48.180 All right. 02:49.710 --> 02:55.010 Go to Brackett's and write some codes, create a function, function a 02:57.660 --> 02:59.430 then write. 02:59.580 --> 03:00.660 Cancel that log. 03:01.620 --> 03:02.070 This. 03:05.920 --> 03:06.970 Called the function. 03:10.120 --> 03:15.250 Reload and you see that we have a window object, as we expected. 03:16.120 --> 03:30.330 So in a regular function, this keyword refers to global window object and you see that we have true. 03:31.000 --> 03:35.780 So in this case, this could act like it was in global execution context. 03:36.400 --> 03:45.880 OK, now create another function inside, function A and call it function B, then inside the curly 03:45.880 --> 03:46.480 braces. 03:49.150 --> 03:50.920 Right, cancel that log of this. 03:54.890 --> 04:09.650 And then consider this triple equals to window in function B, reload, and we get the exact same result. 04:10.770 --> 04:16.990 So it doesn't matter if we create function on global level or incite other irregular functions. 04:17.580 --> 04:23.940 This keyword always refers to global window object and acts like in global execution context. 04:25.570 --> 04:36.310 All right, now, let's recall our example about object person, so right, variable per equals an object 04:36.310 --> 04:38.230 and then create properties. 04:38.740 --> 04:40.210 First name, John. 04:43.970 --> 04:45.410 That last name, Smith. 04:49.950 --> 04:52.650 Right, the method get full name. 04:56.970 --> 04:58.230 Then create function. 05:00.660 --> 05:02.070 And return. 05:05.490 --> 05:06.930 Her first name. 05:11.730 --> 05:13.140 Plus, this space. 05:15.030 --> 05:17.100 And then plus last night. 05:24.180 --> 05:28.340 The morgue get full name method, so right, Peridot, get full name. 05:33.500 --> 05:36.260 Reload and we have John Smith. 05:38.720 --> 05:42.830 OK, now, right above, cancel that log. 05:43.950 --> 05:47.970 This triple equals Per. 05:50.420 --> 05:57.560 We need to write it before a return statement because it terminates execution of codes which are written 05:57.560 --> 05:58.190 after it. 05:59.210 --> 06:03.340 So reload the page and you see that we have true. 06:04.640 --> 06:10.850 That's because, as we said, inside the method of object, this refers to the motion object, which 06:10.850 --> 06:15.170 is person here, and therefore we can use this instead of person. 06:16.340 --> 06:20.060 So right here, this is your first name. 06:22.770 --> 06:24.450 And then these last name. 06:27.470 --> 06:31.890 Reload and he see that we have exact same result. 06:33.440 --> 06:40.760 All right, now I want to show you an interesting and important thing regarding this quote, I'm going 06:40.760 --> 06:47.120 to change a return into console the clock because I need to write some functions below it. 06:51.150 --> 06:54.960 Also, get rid of cars that look from here. 06:58.160 --> 06:59.540 Now create function. 07:03.910 --> 07:10.030 Function great and then inside the price is right, cancel that log. 07:12.570 --> 07:13.980 Hi, plus. 07:15.530 --> 07:17.030 These first name. 07:22.050 --> 07:24.960 And then call the function right, great. 07:28.860 --> 07:35.040 So here we have another function inside the method of object person, and you may expect that it should 07:35.040 --> 07:36.540 give us high John. 07:37.840 --> 07:38.260 Watch. 07:39.940 --> 07:48.250 We got high, undefined, this keyword in search function grid couldn't access on the property first 07:48.250 --> 07:48.510 thing. 07:49.810 --> 07:56.470 The reason is that people who created JavaScript decided that this keyword inside their regular function 07:57.100 --> 07:59.020 to refer to global, we no object. 08:00.310 --> 08:07.970 So it doesn't matter whether this function is on global level or inside an object method if we create 08:07.970 --> 08:14.760 the variable with the same name, first name and assigned value. 08:15.250 --> 08:15.700 Bob. 08:18.790 --> 08:20.380 Then we will get high, Bob. 08:23.110 --> 08:26.110 Variable first name is created in global scope. 08:26.740 --> 08:34.600 Therefore, it's a property of global window object, which is referred by keyword this, and that's 08:34.600 --> 08:35.860 why it would got high. 08:35.870 --> 08:44.890 But some of the developers criticized the decision and they think that in this case, this should refer 08:44.900 --> 08:45.930 to object person. 08:46.750 --> 08:48.880 But it's the way how JavaScript works. 08:49.990 --> 08:54.670 We can easily fix that, create variable and call it that. 08:56.940 --> 08:59.830 Sometimes developers call it self. 09:00.060 --> 09:06.360 So you can feel free and call any of them you like, then assign a value of this. 09:09.110 --> 09:11.990 We don't need it anymore, so let's get rid of that. 09:15.920 --> 09:23.120 Because of that at this point, I mean, inside a method, this keyword refers to object person that 09:23.130 --> 09:32.330 using that variable we maintain the reference to object person and the last thing to do is to change 09:32.480 --> 09:34.100 this into that. 09:38.920 --> 09:43.270 Reload and you see that we have high John instead of Bob. 09:45.290 --> 09:53.240 All right, the last thing I'm going to show you is how to borrow from object person the method, get 09:53.240 --> 09:58.160 full name for that, create another object and call it person one. 10:00.760 --> 10:09.010 Then at the properties, first name, right, Niek and last name, though. 10:12.670 --> 10:21.130 Now, using dot notation, let's create get full name for person one right person, the one that got 10:21.130 --> 10:21.670 full name. 10:24.250 --> 10:25.450 And assigned to value. 10:27.540 --> 10:30.000 Her daughter get full name. 10:34.510 --> 10:42.610 So because of that, we have used keywords inside gatefold name method that this fact allows us to borrow 10:42.610 --> 10:50.860 the method from object person and it will work perfectly for personal one in order to invoke this method. 10:50.890 --> 10:54.640 We need to write per one dot, get full name. 11:00.200 --> 11:07.160 So you see that it works for a person one, and we have Nick DDO and Heinicke from Object Person one. 11:09.210 --> 11:09.860 Makes sense. 11:11.580 --> 11:18.960 All right, you need to understand this concept very well, so I recommend to think about it again, 11:19.530 --> 11:21.670 test these codes on your own. 11:23.010 --> 11:25.320 Think of new examples and practice. 11:26.850 --> 11:32.060 Generally, how JavaScript works under the hood is a bit confusing and unknown for many developers. 11:32.520 --> 11:40.470 So if you are new and have some troubles with the section, you can watch the videos or feel free and 11:40.470 --> 11:42.500 ask any question you want anytime. 11:43.200 --> 11:44.190 I'll be glad to help. 11:45.180 --> 11:46.350 See you in the next video.