Javascript Object Oriented Design - Javascript Constructors

• « Previous
• Next »

A constructor is simply a function that is used with new to create an object.

We have used built-in JavaScript constructors,such as Object, Array, and Function.

The constructors create objects which have the same properties and methods.

To create multiple similar objects, we should create our own constructors.

A constructor is just a function which is defined in the same way.

The constructor names should begin with a capital letter, to distinguish them from other functions.

Example

For example, the following code creates an Book function as its constructor:

function Book() { 
} 

The function above is a constructor, and there is no syntactic difference between this function and any other function.

Book is a constructor because its first letter is capitalized.

After the constructor is defined, we can create instances, like the following two Book objects:

var book1 = new Book(); 
var book2 = new Book(); 

Note

When there is no parameters to pass into the constructor, we can even omit the parentheses:

var book1 = new Book; 
var book2 = new Book; 

book1 and book2 are instances of the Book type.

The new operator automatically creates an object of the given type and returns it.

We can use the instanceof operator to deduce an object's type.

The following code shows instanceof in action with the newly created objects:

function Book() { 
} 

var book1 = new Book(); 
var book2 = new Book(); 

console.log(book1 instanceof Book);     // true 
console.log(book2 instanceof Book);     // true 

The code above generates the following result.

book1 and book2 are created with the Book constructor, instanceof returns true.

Note 2

constructor property points back to that constructor function.

For example, Book is the constructor property for book1 and book2:

function Book() { /*from w  ww  .j  ava 2 s. co  m*/
} 

var book1 = new Book(); 
var book2 = new Book(); 


console.log(book1.constructor === Book);     // true 
console.log(book2.constructor === Book);     // true 

The code above generates the following result.

The following code shows how to add any properties inside of the constructor:

function Book(name) { 
   this.name = name; 
   this.writeLine = function() { 
        console.log(this.name); 
    }; 
} 

The new version of the Book constructor accepts a single named parameter, name, and assigns it to the name property of the this object.

The constructor defines a writeLine() method to the object.

The this object is created by new when calling the constructor, and it is an instance of the constructor's type.

The following code shows that we can use the Book constructor to create objects with an initialized name property:

function Book(name) { // www. j  a v  a2s. c om
   this.name = name; 
   this.writeLine = function() { 
        console.log(this.name); 
    }; 
} 

var book1 = new Book("Javascript"); 
var book2 = new Book("CSS"); 

console.log(book1.name);           // "Javascript" 
console.log(book2.name);           // "CSS" 

book1.writeLine();                   // outputs "Javascript" 
book2.writeLine();                   // outputs "CSS" 

The code above generates the following result.

• Next »
• « Previous