Adventures In Coding - Toronto based Ruby on Rails developer Kevin Faustino's technical blog about Ruby on Rails, JavaScript, and Software Development

One of the more advanced topics in JavaScript is how to implement inheritance in your code. The reason why inheritance causes so much confusion is because there are so many ways to implement it in JavaScript.

For those who are unfamiliar with inheritance, it allows us to extend a previously existing entity and supplement it by adding methods/properties to create an entirely new entity. It is an amazing way to reuse code!

Here is Wikipedia’s definition:

“In object-oriented programming(OOP), Inheritance is a way to compartmentalize and reuse code by creating collections of attributes and behaviors called objects which can be based on previously created objects”

There are a variety of JavaScript frameworks that provide a means to perform classical inheritance. Some of these include Prototype, MooTools, and ClassJS. This is a great option for a team where most of the developers come from other object-oriented languages. Even though the above implementations are viable solutions, Douglas Crockford suggests the ideal solution is to use the prototypal inheritance, which has objects inheriting from other objects

Implementation

In JavaScript everything is an object, there is no concept of a class like other object-oriented programming languages. With prototypal inheritance, we implement inheritance by creating objects which will act as prototypes for other objects.

My favourite implementation comes from Stoyan Stefanov’s book Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications, and libraries. Here is my slightly modified version of a function which abstracts the creation of a child object:

function object(parent, supplements){
  /*  Create a variable that will store our child object. */
  var child;

  /*  Create an empty function F which will act as an intermediary between
      the parent and the child. F will have no properties of its own.	*/
  function F() {};

  /*  Assign the parent constructor to the prototype of F.
      This will allow the child to copy all the parent’s properties without
      having to set it’s prototype to the parent instance. */
  F.prototype = parent;

  /*  Create a new child object from F. We get a copy of all the parent’s properties.
      Functions/objects are copied by reference. */
  child = new F();

  /*  Define a property uber which points to the parent object. Simulates super
      from other languages. */
  child.uber = parent;

  /*  Add any functions/properties desired for the child object. */
  for(var i in supplements){
    child[i] = supplements[i]
  }

  return child;
};

Example

Here is a basic example displaying how the properties are copied and overridden in a parent/child relationship.

var parent = {
  firstName: "William",
  lastName: "Adama",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

var child = object(parent, {
  firstName: "Lee"
});

child.fullName(); // "Lee Adama"
parent.fullName(); // "William Adama"

We can implement another version of fullName() that indicates William is Lee’s father without removing the parent function.

child.fullName = function(){
  return this.uber.fullName() + "'s child " + this.firstName;
};

child.fullName(); // "William Adama's child Lee"
parent.fullName(); // "William Adama"

We can even remove our child’s fullName() function and still have access to out parent’s function because it exists in the child’s prototype chain.

delete child.fullName
child.fullName(); // "Lee Adama"

Benefits

The benefit of using prototypal inheritance is that we are working with the strengths of JavaScript and not trying to imitate features of another language.

Not only does it provide an easy way to do inheritance, but there is a performance boost as well. When a function is defined in an object, they are created by reference, resulting in all child objects pointing to the same function and not creating their own copies. This can also lead to some issues if you are unaware of this. If you do not want to share any objects or functions in your child object, make sure to supplement them. Any functions/objects you create in your child object will take precedence over the parent’s version.

Out in the Wild

In the latest ECMAScript 5 standard, prototypal inheritance became a first class citizen as a new native method Object.create(proto [, propertiesObject ]) was added. It allows you to create a new object with the specified prototype object and properties. You can also use it today in YUI 3 via the Y.Object(…) function from YUI core.