In part 1, I finished off with an example of “class-like” inheritance, but I didn’t get around to explaining it. In this post, I’ll try to couple of key points. Namely, the “heir” function, and closures, created with immediately invoked function expressions.


First of all, let’s look at the “heir” function (newer browsers support Object.create, which with a single argument will do the same thing).

function heir(p) {
 // This function creates a new empty object that inherits from p
 var f = function(){};
 f.prototype = p;
 return new f();

As the comment says, what “heir” does is take a single object “p” and return a new object which inherits from p. What this is generally used for is creating a prototype chain, by having one prototype inherit from another prototype.

Because of how the “new” keyword in Javascript works, objects created with

var myShape = new Shape("blue");

inherit from Shape.prototype, and objects created with

var myRect = new Rectangle("Red", 5, 3);

will inherit from Rectangle.prototype.
After the lines

var superProto = Shape.prototype;
Rectangle.prototype = heir(superProto);

Rectangle.prototype will inherit from Shape.prototype. This means that you can call “myRect.isRed()” and Javascript will follow the prototype inheritance chain until it gets to Shape.prototype.isRed, and call that. Or in more general terms “rectangles inherit all the properties and methods of shapes”.

There is one side-effect to be aware of using “heir”. Normally, prototypes have a “constructor” property referring back to the constructor function for which they were created. So

var myArray = new Array();
return myArray.constructor;

Will give us the constructor function “Array”. However, after calling

Rectangle.prototype = heir(superProto);

Rectangle.prototype.constructor points back to “Shape”, which is not what we want. To correct that, we simply add

Rectangle.prototype.constructor = Rectangle;


The code


Forms an immediately invoked function expression. In other words, we create a function, call it once, and then forget about it. You might be wondering why we would do that, when we could just run the code without all those extra brackets. The reason is to control the scope of our variables. When we write

var superProto = Shape.prototype;

We ensure that superProto is only visible within this anonymous function. If a global variable called superProto exists, our local variable will hide it, and if we want to use another variable called superProto later on, it wont clash with this code.

Most importantly, if we declare any functions within this block of code, they will “remember” that superProto was visible when they were created, and they will still have access to it later. This is because of “closures” – if you create a function while inside another function, the “inner” function will be able to see all the variables that were visible when it was created, and continue being able to see them after the outer function has finished executing.