Javascript Constructor Pattern

Constructors in Javascript creates specific types of objects.

We can create constructors that define properties and methods for custom object.


function Person(name, age, job){//from  ww  w  .  j a v a  2  s  .  c o m
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
       console.log(this.name);
   };
}

var person1 = new Person("XML", 29, "Markup");
var person2 = new Person("CSS", 27, "Style");
console.log(person1.name);
console.log(person1.age);
console.log(person1.job);
person1.sayName();

console.log(person2.name);
console.log(person2.age);
console.log(person2.job);
person2.sayName();

The code above generates the following result.

Note

There is no object being created explicitly in the constructor.
The properties and method are assigned directly onto the this object.
There is no return statement.
By convention, constructor functions always begin with an uppercase letter, whereas nonconstructor functions begin with a lowercase letter.
To create a new instance of Person, use the new operator.
Constructors defined in this manner are defined on the Global object.

Constructor Property

Each of objects created by constructor has a constructor property that points back to Person.


function Person(name, age, job){//from www . j a  v  a2  s  .co  m
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
       console.log(this.name);
   };
}

var person1 = new Person("XML", 29, "Markup");
var person2 = new Person("CSS", 27, "Style");
console.log(person1.constructor == Person);  //true
console.log(person2.constructor == Person);  //true

The code above generates the following result.

instanceof

We can use instanceof operator the check the object type.


function Person(name, age, job){// w  ww  . ja  v  a2s . c o  m
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
       console.log(this.name);
   };
}

var person1 = new Person("XML", 29, "Markup");
var person2 = new Person("CSS", 27, "Style");
console.log(person1 instanceof Object);  //true
console.log(person1 instanceof Person);  //true
console.log(person2 instanceof Object);  //true
console.log(person2 instanceof Person);  //true

The code above generates the following result.

Problems with Constructors

Methods are created for each instance by constructors.

Both person1 and person2 have a method called sayName(), but those methods are not the same instance of Function.

It's possible to work around this limitation by moving the function definition outside of the constructor.


function Person(name, age, job){/*from   www.  j  a v a 2  s .c o  m*/
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = sayName;
}

function sayName(){
   console.log(this.name);
}

var person1 = new Person("XML", 29, "Mark up");
var person2 = new Person("CSS", 27, "Style");

Combination Constructor and Prototype Pattern

The constructor pattern defines instance properties, whereas the prototype pattern defines methods and shared properties.

Each instance ends up with its own copy of the instance properties, but they all share references to methods.


function Person(name, age, job){/*from  www .j  ava  2 s. c o  m*/
   this.name = name;
   this.age = age;
   this.job = job;
   this.friends = ["A", "B"];
}

Person.prototype = {
   constructor: Person,
   sayName : function () {
      console.log(this.name);
   }
};

var person1 = new Person("XML", 29, "Mark up");
var person2 = new Person("CSS", 27, "Style");

person1.friends.push("C");

console.log(person1.friends);    
console.log(person2.friends);    
console.log(person1.friends === person2.friends);  //false
console.log(person1.sayName === person2.sayName);  //true

The code above generates the following result.

This is the default pattern to use for defining reference types.

Parasitic Constructor Pattern

The parasitic constructor pattern is to create a constructor that simply wraps the creation and return of another object.


function Person(name, age, job){/*www.  j a  v a 2  s  .  c  o  m*/
   var o = new Object();
   o.name = name;
   o.age = age;
   o.job = job;
   o.sayName = function(){
      console.log(this.name);
   };
   return o;
}

var friend = new Person("XML", 29, "markup");
friend.sayName();  //"XML"

The code above generates the following result.

The function is called as a constructor, using the new operator.

Example

You create a special array that has an extra method.


function MyArray(){/*  w  w  w.  j  av  a2s  . c  om*/
    var values = new Array();
    values.push.apply(values, arguments);
    
    values.toMyString = function(){
       return "["+this.join(",")+"]";
    };
    values.count = function(){
       return this.length;
    };
    return values;
}
var colors = new MyArray("A", "B", "C");
console.log(colors.toMyString());
console.log(colors.count());

The code above generates the following result.