Object JavaScript – Understanding Prototypes

In our recent posts, we’ve seen how to create objects and how to use object prototyping in creating objects. We’ve seen how to extend objects by adding methods, and how to add them to the right level using prototype.

Use inheritance to create a specialized version of one or more classes (JavaScript only supports single class inheritance). The specialized class is commonly called the child or derived class. The other class is commonly called the parent or base class. In JavaScript you derive a class by assigning an instance of the parent class to the child class, and then specializing it. In modern browsers you can also use Object.create to implement inheritance.

In this post, you will learn how to use prototypes for basic inheritance. And in the next post, you will learn how you can implement inheritance using the revealing module pattern.

Let’s Start with Prototypes

A prototype is an object from which other objects inherit properties. So each object and be used to prototype other objects.

Since prototypes are themselves objects, every prototype has a prototype too.

An object in JavaScript is any unordered collection of key-value pairs. If it’s not a primitive (undefined, null, boolean, number or string) it’s an object.

Chain of Prototypes

Every JavaScript object inherits a chain of prototypes, all of which terminate with Object.prototype.

It is done using a simple algorithm, as follows: when you try to access a property/method of an object, JavaScript checks if that property/method is defined in that object. If not, then the object’s prototype will be checked. If not, then that object’s prototype’s prototype will be checked, and so on, all the way to Object.prototype.

Instead of having a separate instance of a function object for every object, you can make the objects share the method by putting it inside the prototype.

How to Implement Inheritance Using Prototypes

To implement javascript inheritance in ECMAScript 5 you can define the prototype of an object and use Object.create to inherit. You can also add/override properties as much as you want.

In this example, the getBreed method is shared by rover and spot—until you override the toString method in spot, anyway. After that, spot has its own version of the getBreed method, but the rover object and subsequent objects created with new GreatDane will still share that one instance of the getBreed method defined in the GreatDane.prototype object.

	function GreatDane() { }

	var rover = new GreatDane();
	var spot = new GreatDane();

	GreatDane.prototype.getBreed = function() {
	return "Great Dane";
	};

	// Works, even though at this point
	// rover and spot are already created.

	alert(rover.getBreed());

	// this hides getBreed() in GreatDane.prototype
	spot.getBreed = function() {
	return "Little Great Dane";
	};

	alert(spot.getBreed());

	// but of course, the change to getBreed
	// doesn’t propagate back to GreatDane.prototype
	// and other objects inheriting from it,
	// it only happens in the spot object

	alert(rover.getBreed());

view raw

ojs-prototypes.js

hosted with ❤ by GitHub

I mention all this because you need to understand how prototypes work when you read JavaScript. But you can also use inheritance using the revealing module pattern, that is shown in my next post.