Object Constructors

Object constructors are a great way to structure objects so that they are reusable, without having to create or redefine a completely new object when there is a slight difference from one to another. This method of object creation allows us to reuse one object by applying different property values to it and creating multiple instances from that same object blueprint.

Instances

Creating instances, or instantiating an object, is simply the act of taking an object definition and creating multiple objects that model its definition. These separate instances can have different property and method parameter values, which makes one unique from another. An object definition is essentially a blueprint that a developer uses to create multiple instances of an object. When an object is instantiated, it intrinsically contains all of the properties and methods that the object defines. Therefore, if we had an employee object with a name property, we could create multiple instances and give each employee a different name. This section will explain how to use the object constructor approach for creating multiple instances of objects to gain maximum reusability in our web applications.

Object constructors are simply a regular JavaScript function in which we encapsulate properties and methods. It is instantiated by use of the native JavaScript new operator. This method is very similar to the Literal Notation method, but the syntax conforms more to a common programming model. We start by creating a simple function in which we provide an object name. In the following example, we are creating an employee object constructor.

function employee(_id, _firstName, _lastName) { }

As you can see, this is a standard JavaScript function, that takes three parameters: an _id, a _firstName, and a _lastName. This function becomes our access point to the objectin other words, if you are familiar with OOP, it is our constructor function. We will use the name of our function as our object name. If you are familiar with building classes with other programming languages, think of this approach as a way of creating a class without defining the object as a class, or creating a class with a function instead of a class declaration. We still have our constructor, properties, and methods; we simply do not have the class declaration encapsulating the object's details. With our constructor in place, we can begin to instantiate the object. This is where we begin to see the reusability.

var kh001 = new employee(001, "Kris", "Hadlock"); var jd002 = new employee(002, "John", "Doe");

These examples show how simple it is to create multiple instances of an object using this approach. The exciting part about this is that we can continue to use this object for any employee that we need to add, and if we need to add a method or property, it is not going to have any effect on the other employee objects. They will simply ignore these items unless they are updated.

In order to make these objects more flexible, we are allowing parameters to be passed to the object constructor. These parameters will be used to define different properties within the objects to make one object different from another. For instance, we may want to create a new employee with our employee object and need to provide a new first and last name for each. In the previous example, we are passing a first and last name as our parameters, which will be used as properties in our class. Let's take a look at how we take these values and set them to object properties.

Properties

Taking the parameter from the object constructor and turning it into a local object property is extremely simple. First, we need a value as the parameter, which we are already receiving. Next, we must create local properties within the object that we will use to set to the value of these parameters.

function employee(_id, _firstName, _lastName) {     this.id = _id;     this.firstName = _firstName;     this.lastName = _lastName; }

This method is receiving an _id, a _firstName, and a _lastName parameter, which we are using to set to local properties in the object. These parameters allow us to distinguish one employee from the others, and provide us with a reference to retrieve specific details about each employee. Local object properties can be used at any later point. For example, we could reference these employee objects with another object and then get the first and last names. These employee objects would retain that information, regardless of how many employees were created.

These properties can be set and referenced solely, or we could use methods within the object to handle this detail. Using methods in our object constructors helps us to combine common functionality into one reference. Let's now take a look at how to add a method to an object constructor and understand how it is beneficial to the scalability of our application.

Methods

Objects are so powerful because of the data they store and the methods they contain, which can be called to perform specific functions. These methods can be used to set new values for object properties or retrieve a value from object properties. They also can be used to perform complex algorithms, call other methods, create other objects, and any other custom functionality that you or your clients need. Here is an example of the employee object with a method called getFullName.

function employee(_id, _firstName, _lastName) {     this.id = _id;     this.firstName = _firstName;     this.lastName = _lastName;     this.getFullName = function()     {         return this.firstName + " " + this.lastName;     } }

This method returns two concatenated properties, which form an employee's full name. This is just the beginning of what we can accomplish with an object like this. For example, we can create methods for retrieving or setting an employee's job title because this is something that could change if an employee gets a promotion. These are simple methods to add, yet they provide a lot of power to someone who has the ability to change an employee's job title. Here is an example.

function employee(_id, _firstName, _lastName, _jobTitle) {     this.id = _id;     this.firstName = _firstName;     this.lastName = _lastName;     this.jobTitle = _jobTitle;     this.getFullName = function()     {         return this.firstName + " " + this.lastName;     }     this.setJobTitle = function(_jobTitle)     {         this.jobTitle = _jobTitle;     }     this.getJobTitle = function()     {         return this.jobTitle;     } }

These methods require us to add a new property called jobTitle. This property can be set through the constructor function or set with our new setJobTitle method. After we set the value, we can also retrieve it with the getJobTitle method. These methods are the equivalent of getter and setter methods for JavaScript because they allow other objects to get or set values of specific properties of an object. We could also make a property a read-only property by allowing only a getter and not a setter.

A more complicated example is an employee's sick days. This requires us to create an array of sick days for each employee object. Let's say that we need a way to retrieve a list of sick days that is formatted into an HTML list. Here is an example of how we would accomplish this functionality.

var sickDays = new Array("1-12", "1-13", "1-14"); var kh = new Employee(001, "Kris", "Hadlock", "GUI Developer", sickDays); function employee(_id, _firstName, _lastName, _jobTitle, _sickDays) {     this.sickDays = _sickDays;     this.id = _id;     this.firstName = _firstName;     this.lastName = _lastName;     this.jobTitle = _jobTitle;     this.getFullName = function()     {         return this.firstName + " " + this.lastName;     }     this.setJobTitle = function(_jobTitle)     {         this.jobTitle = _jobTitle;     }     this.getJobTitle = function()     {         return this.jobTitle;     }     this.getSickDayList = function()     {         var sickDayList = "<ul>";         for(var i=0; i<this.sickDays.length; i++)         {             sickDayList += "<li>"+ this.sickDays[i] +"</li>";         }         sickDayList += "</ul>";         return sickDayList;     } }

Creating unique methods such as this is a main source of power when creating instances of objects. This is because each of the object's instances will contain this functionality and can call on it at any point in time.