ErudianArt

The personal portfolio and ramblings of Preet Jassi

Prototypal JavaScript Inheritance

JavaScript is a unique language; in many ways it is more similar to lisp than it is to Java or C++. Universities attempt to teach you the fundamentals of programming: object oriented programming, inheritance, polymorphism, modularity, etc. When I was working on Yahoo! Photos, I attempted to apply all of the fundamentals. I started to use classes for everything, and attempted to use inheritance as often as possible. I won't get into the whole Class vs Singleton debate today; however, today we are going to learn how to implement classical inheritance in JavaScript.

Prototypal Inheritance

Java/C++ programmers are used to declaring/inheriting classes like this:

        
class Parent {
	int someValue = 0;
	public void someMethod() {
		System.out.println( someValue );
	}
}

class Child extends Parent {
	int someValue = 1;
}
        
      

There is no mechanism for this in JavaScript. Instead, JavaScript has something called prototypal inheritance.

The Prototype Chain

To understand how inheritance works in JavaScript, you must first understand how the prototype chain works. Briefly, every object has a prototype property that points to some other object. When you access an attribute of an object in JavaScript, first, the instance of that object is checked to see if the attribute is defined at that level. If the attribute is not defined, the prototype object is checked, and then that objects prototype is checked, and so on and so on. This is called the "prototype chain".

Inheritance using Prototype

Inheritance is simply using the parent's values if they are not defined at the child level, which is exactly what prototype does. We want the Child's prototype to point to Parent so that if an attribute does not exist at the Child level but exists at the Parent level, the value from the Parent level is retrieved or executed. So, how do we implement inheritance using the prototype keyword?

        
        
//our parent class
function Parent() {

	this.someValue = 0;
	this.someMethod = function() {
		alert( this.someValue );
	}

}

//our child class
function Child() {

	//we want our someValue to be 1, but inherit the someMethod function
	this.someValue = 1;

}

//ta-da!  
Child.prototype = new Parent();

        
      

That is it! That is all you have to do! End of article... wait a second! For most people, this might do the trick; however, when we set the prototype of Child to Parent, the constructor of Child is overwritten by Parent's constructor. If you console.log an instance of Child, you will see that it is actually identified as a Parent object instead of a Child. We can fix this with some further magic:

        

//assuming Parent and Child classes have already been defined

//lets get to inheriting!
Child.prototype = new Parent();
Child.prototype.constructor = Child;

        
      

Voila! Now, lets try out some more advanced examples:

        

//our parent class
function Parent() {

	this.someValue = 0;

	this.someObj = {
		propA: 'a',
		propB: 'b'
	};
	
	this.someMethod = function() {
		alert( this.someValue );
	}

}

//our child class
function Child() {

	//we want our someValue to be 1, but inherit the someMethod function
	this.someValue = 1;

}

//inherit
Child.prototype = new Parent();
Child.prototype.constructor = Child;


var tom = new Child();
var bombadil = new Child();

tom.someObj.propA = 'c';

alert(tom.someObj.propA); // 'c'
alert(bombadil.someObj.propA); // 'c'

        
      

Wait a second, we only wanted to modify the propA attribute on tom, but bombadil was changed as well! When you use prototypal inheritance, and you inherit an object, each instance of the subclass does not get their own copy of that object. They just point to the object on the parent class. So, to ensure that each Child instance gets their own copy of the objects in the Parent class, we must call the Parent's constructor from within the Child class.

        

//our parent class
function Parent() {

}

//our child class
function Child() {

	//call the parent constructor
	Parent.call(this);

}

//inherit
Child.prototype = new Parent();
Child.prototype.constructor = Child;


        
      

Now you know how to implement inheritance in JavaScript. To be honest, inheritance and classes are seldom needed in JavaScript land, but that is a story for another day!

Recent Entries