It took a little while for me to understand how object constructors worked. You throw the ‘this’ keyword in there and I was completely lost. As weird as it may sound, I understood the ‘this’ keyword…but for some reason, I was not able to put two and two together to understand object constructors, until now; so I had to write a post about it in hopes of helping someone else understand them as well.
Those of you who don’t understand the ‘this’ keyword, check out my two-part post on this, here – > THIS. I recommend you check that out prior to reading this post.
Let us quickly review what an object is:
An object is a collection of data housed in a form of key:value pairs.
Exibit-A:
// An object name 'clothing' containing
// the inventory of shirts, pants and socks.
const clothing = {
pants: 10,
shirts: 5,
socks: 25
};Per the above code ‘clothing’ is the name of the object, pants, shirts, socks are the keys, and the values 10, 5, and 25, respectively, are the values.
Ok, great! Now what is a constructor? A constructor is simply a function that creates an instance of an object. Hmm…what is an instance? An instance basically means that it is a reference to an object….we’ll come back to this, as the examples below with help everything sink in.
Let me reiterate that I recommend you check out my post on the keyword this before reading forward because it will help you understand the information in this post.
Moving forward…
So here is our object constructor:
function Book(title, year, author){
this.title = title;
this.year = year;
this.author = author;
};Per the code above, we will be creating instances of the Book object constructor. How will we do this? By using the new keyword. What does new do? It simply creates an instance of an object.
“Wait, you said the constructor creates the instance of an object”. Yes, it does, but not without the help of the new keyword. Let’s look at some more code to see what I mean.
//Creating an instance of our 'Book" Object Constructor
const novel_1 = new Book('TitleABC', 2016, 'redEyecoding');Per the code above, the new keyword will essentially create an object and assign it to the variable ‘novel‘. That is all the new keyword does…nothing else. Now that we’ve established that, this is where understand the this keyword comes into play.
Now if you recall, from my post on the this keyword, one of the ways to know what this referencing to, is to look to the left of the dot (.). The problem with that method is that we don’t have a dot(.) to look to the left of because we’re dealing with an expression. HOWEVER, to better understand how things work….why not transform our expression into something that would be easier to conceptualize?
// This
const novel_1 = new Book('TitleABC', 2016, 'redEyecoding')
//Translated to this.
{'our book1 object'}.Book('TitleABC', 2016, 'redEyecoding')I do not know if this is actually how the V8 engine does this, but I think its easier to think of it this way, the new keyword first assigns an object to the variable ‘novel_1′, then the novel_1-object invokes the object constructor; thus the this keyword inside of the object constructor is referencing the object who called it; novel_1-object.
I put together a visual representation to better conceptualize things:
First, our plain’ol variables are transformed by the new keyword into variables with objects in them ( empty objects ):
Then the object constructor attaches new keys ( and their values) to the objects that referenced it. Noticed how I replaced the this keyword with the object that referenced the constructor.
Now we can use the “dot method” ( forgive me if that’s not an official term, I’m just trying to make it easy to understand ), to now better understand what the this keyword inside of the object constructor would actually be referencing to.
function Book(title, year, author){
this.title = title;
this.year = year;
this.author = author;
};
const novel_1 = new Book('TitleABC', 1982, 'redEyecoding');
const novel_2 = new Book('Title123', 2011, 'redEyecoding');
const novel_3 = new Book('Title567', 1995, 'redEyecoding');
console.log('novel_1 object', novel_1);
console.log('novel_2 object',novel_2);
console.log('novel_3 object',novel_3);Here is output from my console:
Hopes this helps.