JavaScript prototypes

Prototypes are basically objects, which allow user to add properties and methods to them. All objects have a prototype. Even an empty object of JavaScript has a prototype inherited from Object.prototype. When an object gets request for a property, if it does not have one, it checks for it’s prototype’s prototype. The search goes till the Object.prototype is reached.

The object instance keeps track of it’s prototype using [[Prototype]] property. That is, all new object instances point to the same prototype object, thereby reducing duplicating of code.

Prototype linking in JavaScript

Following rules apply to prototypes:

Object.getPrototypeOf() function determines the [[prototype]] of the object.
__proto__ property allows us to read from and write to [[prototype]] property (to be added in ECMA Script 6).
isPrototypeOf() method determines if an object is a prototype of another.
Object.create() creates the object with specific prototype.

Example of a JavaScript prototypes

<!DOCTYPE html>
<html>

<head>
<script>
	function Library(section){
		this.section = section;
	}
			
	Library.prototype.getBook = function(){
		document.write("1. We are having books in " + this.section + "<br\>");
	}
			
	Programming.prototype = Object.create(Library);
	Programming.prototype.constructor = Programming();
	function Programming(book){
		Library.call(this);
		this.book = book;
	}
	Programming.prototype.getBook = function(){
		document.write("2. We are having " + this.book + "<br\>");
	}
			
</script>
</head>

<body>
<script>
	var bookHouse = new Library("Computer Programming");
	var myBook = new Programming("JS Learning");
	//Output: We are having books in Computer Programming
	bookHouse.getBook();
    //Output: We are having JS Learning
	myBook.getBook();
	var bookPrototype = Object.getPrototypeOf(myBook);
  	
  	// Outputs
  document.write("<p style='font-size:smaller'><i>Checking for PrototypeOf():<br />");
	//Output: false
	document.write((bookPrototype) === Object.getPrototypeOf(bookHouse));
	//Output: true
	document.write((bookPrototype) === Object.getPrototypeOf(myBook));
	
	//Output: true
	document.write(myBook.prototype.isPrototypeOf(bookHouse));
	//Output: true
	document.write(Object.prototype.isPrototypeOf(myBook));
	document.write("</i></p>")
  
  </script>
</body>

    
</html>

Advantages of using prototypes

This can be used to inherit the base class methods to child class without creating new instance of base class.

Prototype defines methods to all instances and new copy of method is not created along with the object. Hence memory is saved.

Disadvantages of using prototypes

Creating a method outside function body, inhibits them from accessing local private variables.

›› go to examples ››

JavaScript prototypes

Example of a JavaScript prototypes

Advantages of using prototypes

Disadvantages of using prototypes

Comments

About

Contact

Get Connected