WEBVTT 00:01.170 --> 00:06.810 In previous lecture, we have discussed how every object which is created by global object constructor 00:06.810 --> 00:09.960 function gets and exist on prototype object. 00:10.620 --> 00:16.200 In this video, I'm going to talk about manually created function constructors and prototypes. 00:17.370 --> 00:20.970 Let's open brackets at first create a simple function. 00:21.330 --> 00:27.000 I'm going to use a regular function and using this function, I will show you how Prototyp object is 00:27.000 --> 00:28.600 created for every function. 00:29.190 --> 00:32.700 It doesn't matter if it's function, constructor or regular function. 00:33.060 --> 00:34.590 So write function a. 00:37.880 --> 00:44.120 One function is created, JavaScript engine actually creates object because we know that functions are 00:44.120 --> 00:49.250 special types of object and at the same time it creates prototype object of this function. 00:50.130 --> 00:53.210 Also, JavaScript engine assigns to the function object. 00:53.510 --> 01:01.160 The prototype property using this property function object has access on its prototype object and also 01:01.160 --> 01:06.070 gets access on global object functions prototype, which was discussed in previous lecture. 01:07.010 --> 01:12.590 So as we said, our newly created function has automatically assigned prototype property. 01:13.550 --> 01:17.450 Let's use it and write in council a prototype. 01:21.440 --> 01:29.390 So actually, now we have access on Prototyp Object, a function eight we have below underscore, underscore, 01:29.390 --> 01:34.310 Proteau underscore, underscore, which points to global object functions. 01:34.310 --> 01:39.800 Prototyp we can reach to it if we write here a dot prototype. 01:41.480 --> 01:43.400 Dot underscore. 01:43.400 --> 01:43.880 Underscore. 01:43.880 --> 01:45.110 Proteau underscore. 01:45.110 --> 01:45.710 Underscore. 01:48.690 --> 01:55.890 So you see that we have here again, the prototype of global object function, it happens in case of 01:55.890 --> 02:03.870 functions, but when we create objects using literal notation, then this kind of object has access 02:03.870 --> 02:05.670 only on global objects. 02:05.670 --> 02:06.750 Function prototype. 02:08.280 --> 02:16.180 OK, let's see again what actually happens when we create function JavaScript engine automatically creates 02:16.180 --> 02:22.580 a prototype object and on that prototype object has access only that created function. 02:23.980 --> 02:28.160 Also, it gets access on global object functions prototype. 02:29.040 --> 02:34.800 And also when we create an object using global object function, then it gets access. 02:34.800 --> 02:37.290 Only the global object functions prototype. 02:38.130 --> 02:43.020 So in this case, function has access on to prototype objects. 02:45.150 --> 02:51.900 OK, so we understand how all of this stuff work, how the prototype objects are assigned to functions, 02:52.530 --> 03:00.540 but you may be wondering why do we need it and how we can use it in practice in case of regular functions? 03:00.930 --> 03:09.120 Prototypes just exist and we don't use them, but they become powerful with function constructors so 03:09.150 --> 03:15.510 we can use prototypes to save methods and properties, which then will be shared to group of objects. 03:15.990 --> 03:21.900 And in most cases they are used when we deal with objects which are created using function constructors. 03:23.190 --> 03:28.050 OK, let's go back to Brackett's and see some examples at first. 03:28.050 --> 03:33.150 Remove those codes and now I'm going to create a function constructor. 03:33.330 --> 03:37.260 So write function person. 03:40.710 --> 03:44.100 Then pass the parameters, first name and last name. 03:49.540 --> 03:51.400 And inside the Kolob racist. 03:53.890 --> 03:58.270 Write this down, first name equals first name. 04:01.710 --> 04:04.860 And then these last name equals to last name. 04:08.650 --> 04:15.560 OK, so we have here function constructed and now let's create a couple of new objects, right? 04:15.580 --> 04:17.620 VAR person one equals. 04:19.790 --> 04:28.460 New person, and I'm going to pass the arguments as first name and last name, right, John Smith, 04:30.710 --> 04:33.950 and in the same way, create another object, right. 04:33.950 --> 04:37.610 For our person to equals new person. 04:40.530 --> 04:44.250 And right again, first and last name as Niek and the. 04:48.250 --> 04:51.070 OK, let's lock them in council, right? 04:51.410 --> 04:52.870 Good luck, person one. 04:57.100 --> 05:00.460 And then consider the luck person to. 05:04.830 --> 05:05.410 Reload. 05:06.690 --> 05:15.540 So here we have our objects, let's drop down them and you see underscore, underscore, Proteau, underscore, 05:15.540 --> 05:18.840 underscore properties, let's dropdown them as well. 05:19.800 --> 05:23.310 Again, here we have another underscore, underscore, Proteau. 05:23.310 --> 05:24.420 Underscore, underscore. 05:25.050 --> 05:26.350 So what does it mean? 05:27.510 --> 05:34.230 You remember that object which was created using literal notation, had access only on global objects, 05:34.230 --> 05:35.460 function prototype. 05:36.330 --> 05:43.080 But in this case, when we create objects using function constructor, they get access on global objects, 05:43.080 --> 05:50.060 function prototype and on function constructor's prototype objects as well in function constructor, 05:50.070 --> 05:52.130 I mean the function that we have created. 05:52.710 --> 05:58.260 So that's why we had to underscore, underscore, Proteau underscore, underscore properties in council. 06:00.090 --> 06:07.590 OK, let's suppose that we want to get full names of these persons so that we can create method inside 06:07.590 --> 06:10.860 function constructor on which those objects will have access. 06:12.180 --> 06:15.870 So let's write this dot get full name. 06:19.390 --> 06:20.560 Equals to function. 06:22.930 --> 06:31.090 And inside the cold prices, we need to write a written statement and then this dot first name. 06:33.500 --> 06:34.040 Plus. 06:36.930 --> 06:40.950 Then make your space and then plus this last name. 06:45.730 --> 06:53.200 Reload and you see that inside those objects, we have added method, get fullName, let's use it, 06:53.560 --> 06:55.330 for example, for person one. 06:55.750 --> 06:59.890 So right dot get full name. 07:02.870 --> 07:13.700 Then reload and we have John Smith, OK, perfect, it works nicely, it's a decent way, but imagine 07:13.700 --> 07:17.510 that we have lots of personal objects created by this function constructor. 07:18.320 --> 07:24.380 Then all of those objects will contain the method that we have created and each time it will take up 07:24.380 --> 07:25.760 a new spot in memory. 07:27.080 --> 07:29.510 Working this way is not a good practice. 07:30.110 --> 07:34.490 And now it's time to use prototype, which is a much better solution in this case. 07:35.120 --> 07:40.640 For that, we need to assign this method to function, construct a prototype object and we can do it 07:40.640 --> 07:41.580 in the following way. 07:42.440 --> 07:43.250 That's right. 07:43.280 --> 07:49.760 Your person, we know that when the function is created, it is assigned prototype property to access 07:49.760 --> 07:51.050 our prototype object. 07:51.500 --> 08:00.380 So we need to write to your DOT prototype and then copy the method from constructor function and paste 08:00.380 --> 08:00.920 it here. 08:06.000 --> 08:15.090 Reload, then drop down, and you see that in objects we don't have get full name method anymore, but 08:15.090 --> 08:20.430 if we check, underscore, underscore, Proteau, underscore, underscore property and then we will 08:20.430 --> 08:21.610 find the method. 08:22.170 --> 08:26.150 It means that it's saved in function, constructor's prototype object. 08:28.350 --> 08:35.970 So why is a better way to use prototype in case of prototype gets full name method takes only one spot 08:35.970 --> 08:42.300 in memory, but it is usable for every object that is created and will be created using function constructor 08:42.960 --> 08:46.970 because as we said, it is a shareable place for all objects. 08:48.000 --> 08:52.380 So we use that full name method with person one or person two. 08:52.860 --> 08:54.440 It will work for both of them. 08:55.500 --> 08:59.280 So write to your full name for person one. 09:03.310 --> 09:07.140 And do it for person to you as well. 09:10.320 --> 09:17.570 Reload and you see that it works for both person objects and the same way we can add properties to prototype 09:17.580 --> 09:19.620 object, so that's right. 09:19.800 --> 09:23.070 Person dot, prototype dot. 09:25.060 --> 09:26.350 Great, for example. 09:29.150 --> 09:32.420 Equals hello from Prototyp Object. 09:36.170 --> 09:39.710 Then reload the page and write and console. 09:42.970 --> 09:44.470 Person one doctor, Grete. 09:47.510 --> 09:50.810 And of course, we have hello from Prototyp Object. 09:52.360 --> 09:56.460 OK, let's see what happens when person one has the same property. 09:56.480 --> 09:56.950 Great. 09:57.620 --> 09:58.460 So right. 09:58.730 --> 10:00.080 Person one dot. 10:00.080 --> 10:00.560 Great. 10:04.200 --> 10:07.590 Equals to hello from person one object. 10:12.300 --> 10:16.380 Than revolts and rights, again, for one, that Grete. 10:19.340 --> 10:25.700 Now we have hello from person one object, OK, so how does it work? 10:26.180 --> 10:28.310 All of this stuff is about prototype chain. 10:28.500 --> 10:31.300 And before we finish, I would like to consider it. 10:32.570 --> 10:37.820 So again, here we have person one object, which is created by function constructor. 10:39.380 --> 10:44.790 We have function constructs with prototype object and also global object functions prototype. 10:45.980 --> 10:53.330 Suppose that person one object and both prototype objects have the property gret with different values 10:54.320 --> 10:58.470 and we want to access on it using the following code person one dot. 10:58.490 --> 10:58.880 Great. 11:00.230 --> 11:02.230 So what will be the result. 11:03.200 --> 11:11.180 I'm sure that you guess will get hello because at first JavaScript engine will search this property 11:11.180 --> 11:17.240 inside person one object and if it exists there then we will get hello. 11:17.960 --> 11:20.590 And after that engine will terminate searching. 11:22.130 --> 11:25.610 Suppose that we do not have great property inside the person. 11:25.610 --> 11:31.370 One object then engine will start searching this property inside purslane object. 11:31.670 --> 11:33.200 It won't find it there. 11:34.010 --> 11:39.220 After that engine will continue searching inside Prototyp object of function constructor. 11:40.250 --> 11:43.700 You say that a great property exists inside that prototype object. 11:44.210 --> 11:49.280 Therefore it will get high and engine will terminate searching again. 11:51.240 --> 11:51.770 All right. 11:52.820 --> 11:57.800 Let's suppose that great property only exists inside the global object function prototype. 11:59.000 --> 12:00.710 You already know what will happen. 12:01.190 --> 12:07.490 JavaScript engine will search it inside person one then inside prototype object of function constructor 12:07.490 --> 12:10.070 person it won't find. 12:10.790 --> 12:15.170 And then Engin will search grid property inside global object functions prototype. 12:15.770 --> 12:25.160 So we will get how if it doesn't exist in person one object or in any of those prototype objects, we 12:25.160 --> 12:26.510 will get undefined. 12:27.590 --> 12:31.580 And all of these relationships are called as prototype chape. 12:34.340 --> 12:38.370 All right, this was all about prototype objects. 12:38.960 --> 12:44.780 I know that it's one of the confusing parts of JavaScript, but it's not really so complicated. 12:45.200 --> 12:46.360 You just need to understand it. 12:46.370 --> 12:53.420 Well, but if you're having trouble with a topic, I recommend to watch those videos and practice and 12:53.420 --> 12:54.980 test some examples on your own. 12:56.120 --> 12:57.770 OK, let's go ahead.