Elegant Object Creation JS Home  <<  JS Advanced  <<  Elegant Object Creation

This lesson is about elegant object creation using prototyping. This method of object creation uses a function to create our objects and is reuseable.

In JavaScripts Basic Tutorials - Lesson 7 - Objects we looked at creating our own objects using the Object constructor. We also added properties to our objects via assignment.

In JavaScript Intermediate Tutorials - Lesson 7 - Object Literals we continued our look at object creation by introducing the 'object literal' style and marked the first few items of a list of nice things to have when creating objects. Let's see that list again, to refresh our memories.

The greyed out items in the list were addressed with 'object literals', commonly known as JSON.

  1. This style of object creation requires a lot of repetitious coding.
  2. The coding style gives no visual clues to the structure of the object.
  3. Values for object creation are hardcoded.
  4. There is no code reusability.

JSON is great to use when, for example, extracting some information from a screen form and creating an object from it. This scenario always extracts information from the same place and as such there is no issues with hardcoding an input form field into our JSON object creation. But, what if we want to create the same objects from disparate parts of our software, without duplicating the code? Prototyping to the rescue!

Object Creation Using Constructor Prototyping

So Let's look at prototyping where we create an object using a constructor function and the new and this special operator. This technique allows object creation without any hardcoding and also allows code reusability, thus fulfilling the last two items on our object creation wish list above.

The code below creates a custom object constructor function overriding the Object.toString() method. We then create a couple of objects and use our custom toString() method to show their values. Finally we call the constructor for our newly created objects.


// Define a custom object type constructor function (a prototype).
function HomeOwner(firstName,lastName) {  
  this.firstName=firstName;  
  this.lastName=lastName;  
}  

// Define a custom override function for toString().
HomeOwner.prototype.toString = function HomeOwnerToString() {  
  var owns = this.firstName + ' ' + this.lastName + ' owns a house!';  
  return owns;  
};

// Create and print a HomeOwner object.
owner = new HomeOwner('Barney','Magrew');  
alert(owner.toString());

// Create and print another HomeOwner object.
owner = new HomeOwner('Arnie','Padrew');  
alert(owner.toString());

// HomeOwner constructor (returns constructor function).
alert(owner.constructor ' constructor');

Press the button below to action the above code:

The constructor prototype we have created uses the this special operator, rather than hardcoded values, to apply the parameters for our prototype. As you can see in the code above we can pass new values to our prototype for each instance we wish to create. So basicially the prototype code is reusable, we just need to pass parameter values. Using this approach to object creation, gives us flexibility and a standardized way to create an object.

Reviewing The Code

Prototyping offers us reusability, flexibility and there is no need to hardcode values in for our objects via assignment.

Lesson 5 Complete

In this lesson we looked at object prototyping and the advantages this type of object creation gives us.

Related Tutorials

JavaScript Basic Tutorials - Lesson 7 - Objects
JavaScript Intermediate Tutorials - Lesson 7 - Object Literals

Reference

JavaScript Reference - Object constructor
JavaScript Reference - new special operator
JavaScript Reference - this special operator