Instructor: Let's now finally write some code
to use the concepts that we talked about
in the last lecture.
And I will start by opening up the starter project
that you can download for this section.
And once again it's on our desktop already.
So I just need to open it.
And here we have the XML file
which connects with our script.
And here is just the empty file.
Alright so this lecture will be about
creating objects using the function constructor.
So I'm just writing it here to structure our code better.
So I'm gonna start by writing
our well-known john object, right?
So john with the name of 'John' of course.
And the yearOfBirth
and then our job.
So this is the way that we have been writing objects
using the object literal, right?
And now imagine that we wanted to create
a lot of objects with different names and ages and jobs.
So as we learned in the last lecture,
we can use some kind of blueprint for this, right?
So in JavaScript there are a couple of different
ways to create objects.
But probably the most popular way
is using something called a function constructor.
And this is a very common JavaScript pattern.
And the pattern is something like a standard way
that we have to solve a problem
always in the same way.
So the function constructor is a pattern
for like writing a blueprint, such as
we have been talking before.
So the name function constructor implies
that we're going to use a function here, right?
And we want this constructor to be called Person.
So we create a function called Person.
And the usual convention in JavaScript is that
we always write function constructors with a
capital letter here, right?
So Person is with a capital P, okay?
And we always do this for function constructors.
Alright, so function and the parameters for
these function constructors, will be the variables
that we want to set in our object.
So in this case, it's gonna be name,
yearOfBirth,
and the job.
And now I'm just going to show you how this is done
and I will explain to you why this works
just in a second, okay?
So what we do is to attach these variables
so these argument's to the this variable
of this function's execution context.
So just like this.
So this.name and remember that the this variable
is simply an object as well.
So we can do it like this.
So this name will be name which means
the one that we get here as an input for the function.
So this.name will be equal to name
which is the parameter of the function.
And then the same thing for the other two.
So this.yearOfBirth
will be equal to yearOfBirth.
And then this.job
will be the job
that we pass into the function.
And that's it.
This is the function constructor.
And again I will explain to you why this works
in a second.
Alright now that we have this function constructor in place
we can then use it to create a john object.
So let's create some space here
and then var john
equal new,
and this is a new operator
new Person.
And then we pass our arguments into the function.
So we already know our arguments are 1990,
and then the job teacher.
So this is how we create new objects
using the constructor function.
And this is called instantiation because
these objects here are instances of the person object
as we learned in the last lecture.
Alright, and as promised I am now gonna explain
you how all of this works.
So first, in order to understand how this works,
we need to first understand what the new operator does.
So when we use the new operator
first a brand new empty object is created.
Alright? So an empty object, this is important.
Then after that the constructor function
which in this case is Person, right, is called
with the arguments that we specified.
Okay, so first and empty object is created
and then function is called.
So as we already know, calling a function
creates a new execution context
that also has a this variable, right?
Now we know that in a regular function call
the this variable points to the global object, right?
But if we now look at our function constructor here
then having the this variable
pointing at the global object wouldn't be so useful, right?
Because like this, that we would simply set
all these properties on the global object.
And that's of course not what we want.
And that's why the new operator takes care of this.
And it makes it so that the this variable of the function
points to the empty object that was created
in the beginning by the new operator.
Remember that?
So again, what the new operator does
is to point the this variable not to the global object
but to this new empty object
that was created in the beginning
when we used this operator.
So then after that when we set the name,
year and job properties to this, then
that's the same as setting them right on our
new empty object.
Okay, and finally if the constructor function
does not return anything,
and as you can see here that is clearly the case,
then the result is simply the object that was created
in the first step.
So this new empty object here.
And this empty object which was created here
now has the properties that we defined.
So the name, yearOfBirth, and job in this case.
Okay? And then finally all of this is
simply assigned to the john variable.
And just like this, we created an object
called john simply by called a function constructor.
So again our new operator here
first creates an empty object,
then it calls our function with the this variable
not pointing to the global object
but to the new object that was created here.
And then when this code here runs
the this variable is no longer the global variable.
And so these are all set on the new object
which is then in the end assigned to this variable.
So I hope that makes sense.
So let's now add inheritance to the game.
And for that we are gonna bring back
our calculate age function.
So let's now suppose that we wanted to add
a method to our objects.
And that sounds easy, right?
We could just add it to our function constructor
like we would do with a normal object.
So just like this.
So this.calculateAge
is simply a function
which logs to the console the age.
So 2016, we already know this by now,
minus this.yearOfBirth, right?
And now we can actually use this
and it should, of course, work.
So john.calculateAge
and let's now open this.
And that's not what I wanted, so...
So here we are.
And in the console.
And what's this here?
Now it's nothing special
so now it's alright.
So 26 is our expected outcome here.
So everything works just fine.
So let's now create a couple of more objects here
for more people.
So var jane is also a new person
and it is going to work
the exact same way, right?
So now I say 'Jane' was born in 1969 let's say,
and she's a designer.
And we'll also create mark.
So a new person
called Mark, obviously.
He was born in 1948 and he's retired.
So if I now run this then each of the objects
that is now created has the calculateAge method
attached to them, right?
Because it's right here in the constructor function
or the function constructor
of all of these three objects, right?
So again each of these objects now has the method.
Now in this case it's just one function
with one line of code, so this is no big deal.
But now imagine that we had 20 functions in each object
and that each of them would like have 100 lines of code.
Now that would not be very efficient
because then we would have three copies
of the exact same thing, right?
And that is exactly why we use inheritance
in the exact same way that we have learned
in the last lecture.
So what exactly did we learn in the last lecture?
So we've learned that we have to add all the methods
and properties that we want to be inherited
into the constructor's prototype property.
And it sounds difficult, but it's really not.
So let's just do this.
Just creating some space here.
And I will actually do it here.
So all we have to do is to say Person.prototype
because as I was saying it's simply a property
so all we have to do is to use the dot and then prototype
and then we can add our function there.
So calculateAge and then our function.
And I can actually copy it from here
because it's the exact same code.
Okay?
And now I'm going to remove it from here.
So right now if I reload this,
effectively none of the objects have the calculateAge
method really attached to them.
But still, they are going to be able to use it.
They will have access to it
because it's in their prototype, right?
So let's prove that.
So I'm going to put all of these together
and then call these methods on all of them.
So calculateAge on jane
and also for mark,
calculateAge.
And if I now reload this,
here is the result.
So all the three ages for all the three people.
So again, the method is not any more
in the constructor, right?
But we can still use it and that's because
it's in the prototype property of our function constructor.
So inheritance actually works.
And this is inheritance in practice.
So this is really great, right?
This is so powerful.
You just really understood how this works
and how it works behind the scenes.
So you cannot just use it, you can also
understand why this works.
And this is really extremely powerful.
And it's really great for you.
So attaching methods to the constructor function's
prototype property is something that is
really really common to use.
We can of course also add properties instead of methods
but that's not really common.
But I still want to show it to you, okay?
So such as we did with the method here,
we can do the same with properties.
So once again Person.prototype.
And now we can say, for example,
a lastname property.
And we can say that they should all be called Smith, right?
Because as we know, this will be inherited for all of them.
And once again I wanna prove that to you.
So let's console log this property.
So first for john.lastname
and then for the other two.
So console.log jane.lastname
and then mark.lastname.
So let's see what happens.
Okay, so all of them are called Smith.
So once again this property is not directly
in the object, right?
But we have access to it
because it's in the prototype property
of the function constructor.
So all John, Jane and Mark inherit this property.
So once more we proved that inheritance really works.
And this is a really big deal.
So if you understood this lecture and the last one,
then you are well on your way to become a really great
JavaScript developer.
What I want you to do now is to create
your own type of objects to play around
with constructors and prototypes a bit.
And this way you can consolidate what you just learned here.
So I hope that sounds like a great idea for you.
And then after that, let's go
straight to the next lecture.