Object creating patterns

JavaScript can create objects in more than one way. Following are the list of patterns and examples:

Listed patterns

Object can be created as a name-value pairs. Once object is created properties can be added to the object. We can create empty object by not having any prototype or methods within {}.

Example of listed pattern

<!DOCTYPE html>
<html>

<head></head>

<body>
<script>
//Empty object.
var obj = {};
//Object called Kate is created
var Kate = {
    name : "Kathy", 
    age: 32, 
    gender: "female",
    getData : function() {
        document.write(this.name + " is " + this.age + " " + this.gender + " " + this.education);
        document.write("<p style='font-size:smaller'><i>last property was added after creation...</p>");
    }
};
//Adding property after object is created.
Kate.education = "bachelor";
Kate.getData();
</script>
</body>

</html>

Factory pattern is used when object to be instantiated is known at run-time. It does not use the keyword new while creating object. This method makes code easy through interface. This makes the code to be re-used which require similar re-instantiation. Disadvantage of this is unit testing is difficult.

Example of factory pattern

Below function outputs the continent for the given country name. The object for respective continent is created depending on country selected. Here factory method becomes relevant.

<!DOCTYPE html>
<html>

<head></head>

<body>
<script>
function Factory() {
	this.selectCountry = function(input) {
		var continent;
		if (input === "Congo") {
			continent = new Africa();				
		}
		else if (input === "India") {
			continent = new Asia();
		}
		else if (input === "Belgium") {
			continent = new Europe();
		}
		else if (input === "Peru") {
			continent = new SouthAmerica();
		}
		continent.country = input;		
		return continent;
	}		
}

var Africa = function() {
	this.name = "Africa";
	//code specific to this function can be added.
	document.write("<br\>Continent is " + this.name);
};

var Asia = function() {
	this.name = "Asia";
	//code specific to this function can be added.
	document.write("<br\>Continent is " + this.name);
};
	
var Europe = function() {
	this.name = "Europe";
	//code specific to this function can be added.
	document.write("<br\>Continent is " + this.name);
};
	
var SouthAmerica = function() {
	this.name = "SouthAmerica";
	//code specific to this function can be added.
	document.write("<br\>Continent is " + this.name);
};
var continentShow = new Factory();
continentShow.selectCountry("Congo");
continentShow.selectCountry("India");
continentShow.selectCountry("Belgium");
continentShow.selectCountry("Peru");
</script>
  <p style="font-size:smaller"><i>continent was re-generated 4 times to match the country...</i></p>
</body>

</html>

Constructors

Object can be created using new keyword. The object name has capital letter in the first word. Constructor is the function with required prototypes and methods. Any number of objects can be created with it.

Example of constructors

function Animal(name, food, type) { this.name = name; this.food = food; this.type = type; } var lion = new Animal(“Lion”, “Meat”, “Wild”);

Prototypes

All the JavaScript objects have a prototype. Prototypes are basically objects. It can allow user to add properties and methods to object, after object is created. Objects created from new Object() inherits Object.prototype which can be over-ridden. Similarly, objects created from new Animal() has new Animal() prototype.

Prototype is created with constructor function. Object.create() is used to create new object with required prototype object and properties.

Creating null object: var Animal = Object.create(null);

To get prototype of Object: Object.getPrototypeOf(Animal); // Returns constructor

Example of prototypes

<!DOCTYPE html>
<html>

<head>
<script>
	//Parent prototype
	function Animal(){
		this.intelligence = false;				
	}			
	//Adding property using prototype to existing object
	Animal.prototype.herbivorous = false;
	//Adding Function using prototype to existing object
	Animal.prototype.eat = function(){
		document.write("<br\> Animals eat anything from grass to rodents to other animals");
	}
	//Create child class object that inherits properties from parent class.
	WildAnimal.prototype = Object.create(Animal.prototype);
			//Set constructor to refer to child class.
	WildAnimal.prototype.constructor = WildAnimal;

	//Child Class
	function WildAnimal(name){
		//Call parent constructor, i.e. super class
		Animal.call(this);
		//Initialize this class properties
		this.name = name;
	}
		//Adding Function using prototype to existing object
	WildAnimal.prototype.live = function(){
		document.write("<br\>" + this.name + " lives in forest");
	}	
	//Over ride parent class methods.
	WildAnimal.prototype.eat = function(){
		document.write("<br\>" + this.name + " eats in forest");
	}
</script>
</head>

<body>
<script>
var Horse = new Animal();
	var Lion = new WildAnimal("lion");
//Prints : Lion eats in forest
	Lion.eat();
//Prints: Lion lives in forest
	Lion.live();		
		//Prints true for both the checks.
  	document.write("<br />");
  	document.write("<br />Lion is instanceof Animal? ");
	document.write(Lion instanceof Animal);
  	document.write("<br />Lion instanceof WildAnimal? ");
	document.write(Lion instanceof WildAnimal);
</script>
</body>

</html>

Object creating patterns

Listed patterns

Example of listed pattern

Factory patterns

Example of factory pattern

Constructors

Example of constructors

Prototypes

Example of prototypes

Comments

About

Contact

Get Connected