In previous lecture, we have discussed how every object which is created by global object constructor
function gets and exist on prototype object.
In this video, I'm going to talk about manually created function constructors and prototypes.
Let's open brackets at first create a simple function.
I'm going to use a regular function and using this function, I will show you how Prototyp object is
created for every function.
It doesn't matter if it's function, constructor or regular function.
So write function a.
One function is created, JavaScript engine actually creates object because we know that functions are
special types of object and at the same time it creates prototype object of this function.
Also, JavaScript engine assigns to the function object.
The prototype property using this property function object has access on its prototype object and also
gets access on global object functions prototype, which was discussed in previous lecture.
So as we said, our newly created function has automatically assigned prototype property.
Let's use it and write in council a prototype.
So actually, now we have access on Prototyp Object, a function eight we have below underscore, underscore,
Proteau underscore, underscore, which points to global object functions.
Prototyp we can reach to it if we write here a dot prototype.
Dot underscore.
Underscore.
Proteau underscore.
Underscore.
So you see that we have here again, the prototype of global object function, it happens in case of
functions, but when we create objects using literal notation, then this kind of object has access
only on global objects.
Function prototype.
OK, let's see again what actually happens when we create function JavaScript engine automatically creates
a prototype object and on that prototype object has access only that created function.
Also, it gets access on global object functions prototype.
And also when we create an object using global object function, then it gets access.
Only the global object functions prototype.
So in this case, function has access on to prototype objects.
OK, so we understand how all of this stuff work, how the prototype objects are assigned to functions,
but you may be wondering why do we need it and how we can use it in practice in case of regular functions?
Prototypes just exist and we don't use them, but they become powerful with function constructors so
we can use prototypes to save methods and properties, which then will be shared to group of objects.
And in most cases they are used when we deal with objects which are created using function constructors.
OK, let's go back to Brackett's and see some examples at first.
Remove those codes and now I'm going to create a function constructor.
So write function person.
Then pass the parameters, first name and last name.
And inside the Kolob racist.
Write this down, first name equals first name.
And then these last name equals to last name.
OK, so we have here function constructed and now let's create a couple of new objects, right?
VAR person one equals.
New person, and I'm going to pass the arguments as first name and last name, right, John Smith,
and in the same way, create another object, right.
For our person to equals new person.
And right again, first and last name as Niek and the.
OK, let's lock them in council, right?
Good luck, person one.
And then consider the luck person to.
Reload.
So here we have our objects, let's drop down them and you see underscore, underscore, Proteau, underscore,
underscore properties, let's dropdown them as well.
Again, here we have another underscore, underscore, Proteau.
Underscore, underscore.
So what does it mean?
You remember that object which was created using literal notation, had access only on global objects,
function prototype.
But in this case, when we create objects using function constructor, they get access on global objects,
function prototype and on function constructor's prototype objects as well in function constructor,
I mean the function that we have created.
So that's why we had to underscore, underscore, Proteau underscore, underscore properties in council.
OK, let's suppose that we want to get full names of these persons so that we can create method inside
function constructor on which those objects will have access.
So let's write this dot get full name.
Equals to function.
And inside the cold prices, we need to write a written statement and then this dot first name.
Plus.
Then make your space and then plus this last name.
Reload and you see that inside those objects, we have added method, get fullName, let's use it,
for example, for person one.
So right dot get full name.
Then reload and we have John Smith, OK, perfect, it works nicely, it's a decent way, but imagine
that we have lots of personal objects created by this function constructor.
Then all of those objects will contain the method that we have created and each time it will take up
a new spot in memory.
Working this way is not a good practice.
And now it's time to use prototype, which is a much better solution in this case.
For that, we need to assign this method to function, construct a prototype object and we can do it
in the following way.
That's right.
Your person, we know that when the function is created, it is assigned prototype property to access
our prototype object.
So we need to write to your DOT prototype and then copy the method from constructor function and paste
it here.
Reload, then drop down, and you see that in objects we don't have get full name method anymore, but
if we check, underscore, underscore, Proteau, underscore, underscore property and then we will
find the method.
It means that it's saved in function, constructor's prototype object.
So why is a better way to use prototype in case of prototype gets full name method takes only one spot
in memory, but it is usable for every object that is created and will be created using function constructor
because as we said, it is a shareable place for all objects.
So we use that full name method with person one or person two.
It will work for both of them.
So write to your full name for person one.
And do it for person to you as well.
Reload and you see that it works for both person objects and the same way we can add properties to prototype
object, so that's right.
Person dot, prototype dot.
Great, for example.
Equals hello from Prototyp Object.
Then reload the page and write and console.
Person one doctor, Grete.
And of course, we have hello from Prototyp Object.
OK, let's see what happens when person one has the same property.
Great.
So right.
Person one dot.
Great.
Equals to hello from person one object.
Than revolts and rights, again, for one, that Grete.
Now we have hello from person one object, OK, so how does it work?
All of this stuff is about prototype chain.
And before we finish, I would like to consider it.
So again, here we have person one object, which is created by function constructor.
We have function constructs with prototype object and also global object functions prototype.
Suppose that person one object and both prototype objects have the property gret with different values
and we want to access on it using the following code person one dot.
Great.
So what will be the result.
I'm sure that you guess will get hello because at first JavaScript engine will search this property
inside person one object and if it exists there then we will get hello.
And after that engine will terminate searching.
Suppose that we do not have great property inside the person.
One object then engine will start searching this property inside purslane object.
It won't find it there.
After that engine will continue searching inside Prototyp object of function constructor.
You say that a great property exists inside that prototype object.
Therefore it will get high and engine will terminate searching again.
All right.
Let's suppose that great property only exists inside the global object function prototype.
You already know what will happen.
JavaScript engine will search it inside person one then inside prototype object of function constructor
person it won't find.
And then Engin will search grid property inside global object functions prototype.
So we will get how if it doesn't exist in person one object or in any of those prototype objects, we
will get undefined.
And all of these relationships are called as prototype chape.
All right, this was all about prototype objects.
I know that it's one of the confusing parts of JavaScript, but it's not really so complicated.
You just need to understand it.
Well, but if you're having trouble with a topic, I recommend to watch those videos and practice and
test some examples on your own.
OK, let's go ahead.