Submodule 12.3: Constructor functions

Introduction to Constructor

In the previous submodule, we learned about JavaScript objects. Although objects give us a lot of capabilities, they have one drawback, they are not easily reusable.

This means that if we want to have more than one objects with the same properties and methods on a page, there is no easy way to achieve it. 

The solution to the above comes with the usage of constructor functions. 

With constructor functions, we can create as many replicates as we may need, without writing excess code.  

For example, imagine that we want to create 1.000 cycles that are randomly moving ( we will learn how to do this in another submodule).

If we were to do that using JavaScript objects, we would have to write the same code, with different names, 1000 times.

We only need one constructor function to achieve the same result.

Constructor syntax

Let's take the example of the JavaScript Object

var myObject = { 
name:"myName", 
age:20, 
job:"myJob" 
};

and see how it can be converted to constructor function.

In this case, we would first create an object type using a constructor function:

function myObject (n,a,j) { 
this.name= n; 
this.age = a; 
this.job=j; 
}

In general in a constructor function:

• parameters are passed inside the function, in this case, n,a,j are the parameters.
• each property starts with the keyword this.
• this does not have any default value, the value will be defined when a new object will be created.
• the assignment symbol is been used between the property and the value that will be defined by the parameter
• each property is separated from the next one by a semicolon

To use the constructor function, we have to create an object. The way this object is created is by calling the constructor function with the new keyword. 

Example:

var him = new myObject ("John","30","developer");

Now, the values given in the "him" object, have passed inside the constructor function. 

We can call the constructor properties with the same logic that we use for the JavaScrip Objects. 

For example, one of the ways to access the name property would be:

console.log(him.name);

Methods inside Constructor Functions

Similar to JavaScript objects, Constructor functions can also have methods.

Example of a method inside constructor function:

function myObject (n,a,j) { 
this.name= n; 
this.age = a; 
this.job=j; 
this.nameAge = function(){
                return this.name + " " + this.age;
    }
}

Let's create two new objects:

Object 1

var student1 = new myObject("Helen");

Object 2

var student2 = new myObject("Aris","24");

How would you call the method for Object 2?

Answer:

What would be the result if we call the method on object 1? Open your console and type the appropiate code to see the result.

Answer:

Exercise

1. Open your editor, create a new file and save it as exersice12.3.03.html in the folder "yourNameWEB2JS".
2. Modifying the above code, create 2 new objects. The browser's output should be as shown in the following image:

Solution:

Adding Properties and Methods

There are two different options when we want to create new properties/methods.

The first option is to create them only for one of the created objects.

Example:

function myObject (n,a,j) { 
this.name= n; 
this.age = a; 
this.job=j; 
this.nameAge = function(){
                return this.name + " " + this.age;
    }
}

var student1 = new myObject("Aris","24");

var student2 = new myObject("Peter","24");

student1.hobby = "cinema";

student1.addMethod = function () { return this.job + " " + this.hobby; };

In this case, only "student1" object has the new property and method.

The property should have an assigned value whereas method follows the same syntax with the one used inside the constructor.

What do you think will happen if we try to access the "hobby" property in "student2" object? Open your console and type the appropriate code to see the result.

View source:

The second option is to add properties or methods, directly inside the constructor function.

In this case, we use the same syntax discussed in the previous chapter. Properties and Methods added inside the constructor are applied to all created objects.