Constructor Pattern
This lesson discusses the constructor pattern in detail using a coding example.
We'll cover the following
What is the constructor pattern?
As a JavaScript developer, you may have encountered “constructors” at some point. These are special functions that initialize objects with specific properties and methods.
The “constructor pattern”, as the name defines, is a class-based pattern that uses the constructors present in the class to create specific types of objects.
Example
There are many ways to create objects in JavaScript, such as using the {}
notation or using Object.create
.
However, in JavaScript, the use of the “constructor” pattern is very popular as it can create multiple objects of a specific kind. Let’s take a look at an example.
function Human(name, age, occupation){ //ES5 function based constructor//defining properties inside the constructor function//constructor initializing the property values upon object creationthis.name = name;this.age = age;this.occupation = occupation;//defining a method inside the constructor functionthis.describe = function(){console.log(`${this.name} is a ${this.age} year old ${this.occupation}`);}}//creating a "person" object using the Human constructor//the constructor uses the arguments passed into it to//initialize the property values name, age and sexvar person = new Human("Elle", "23", "Engineer");//calling the describe method for the person objectperson.describe();
Explanation #
The ES5 version of JavaScript uses functions as constructors. These functions are used to instantiate objects. In the example above, the constructor function Human
is defined. It has the following properties and method:
-
age
-
name
-
occupation
-
describe()
On line 15, an object is created from Human
using the new
keyword. It will contain all the properties and methods defined in Human
.
var person = new Human("Elle", "23", "Engineer"); //line 15
When person
object is created it will have its name
, age
, and occupation
properties set to the arguments passed to the constructor function.
Similarly, it will also contain the method describe
. On line 17, it is invoked for the person
object
person.describe();
and the following output is seen on the console:
"Elle is a 23 year old Engineer"
How was this output achieved? You might have noticed the use of the this
keyword inside the Human
constructor function. this
refers to the new object that is being created, person
, in our case. Hence, in the lines
this.name = name;
this.age = age;
this.occupation = occupation;
this
refers to person
object. Similary, in the line
console.log(`${this.name} is a ${this.age} year old ${this.occupation}`);
this
refers to the person
object; hence, displaying the output above.
We discussed being able to create multiple objects using the constructor as a template. Let’s do that for the example above:
function Human(name, age, occupation){this.name = name;this.age = age;this.occupation = occupation;this.describe = function(){console.log(`${this.name} is a ${this.age} year old ${this.occupation}`);}}var person = new Human("Elle", "23", "Engineer");person.describe();//creating a second objectvar newperson = new Human("Joe", "13","Painter");newperson.describe();
Now we have a second object, newperson
. As explained above, this
refers to the new object created; hence, line 13 will set the properties of newperson
object equal to the arguments passed in the constructor. Similarly, newperson.describe()
will show the following as output:
"Joe is a 13 year old Painter"
When to use the constructor pattern?
You can use it when you want to create multiple instances of the same template since the instances can share methods but still be different. Some examples of where it can be useful include:
-
libraries
-
plugins
Let’s move on to a challenge in the next lesson.