Inheritance in JavaScript: Read & Practice

This articles shares my basic understanding of inheritance. It briefly touches the following sections:

• Definition
• Need
• Implement in JavaScript
• Practice! Practice! Practice!

Definition

As per wiki, inheritance in object-oriented programming is the mechanism of basing an object or class upon another object (prototype-based inheritance) or class (class-based inheritance), retaining similar implementation.

Now JavaScript does not have classes so in this context we define inheritance as:

Inheritance in JavaScript is the ability to have an object delegate some or all of its implementation to another, by way of a hierarchical link.

fig. 1

Now here in this fig. 1 ‘bar’ (sub-class) inherits from ‘foo’ (base-class) so it can now access/ share properties that are made available by foo.

Need
Inheritance opens up the possibilities of code-reuse which is super helpful because it makes code more maintainable and reduce coding efforts in long terms. It also helps us implement one of pillar for OOP i.e. polymorphism with the help of overriding. Through overriding we can redefine an existing method as per requirement.

Implement in JavaScript
Let us implement the example shown in fig. 1.

// Constructor function for Foo
function Foo (prop1, prop2) {
  this.prop1 = prop1;
  this.prop2 = prop2;
}
Foo.prototype.toString = function () {
  return [this.prop1, this.prop2].join(':');
}
// Constructor function for Bar
function Bar (prop1, prop2, prop3, prop4) {
  // Call base class constructor function for inheritance
  // Can be called without parameters if base class constructor
  // is not expecting any and that is all we need to inherit.
  Foo.call(this, prop1, prop2);
  
  this.prop3 = prop3;
  this.prop4 = prop4;
}
// The new object has Foo.prototype as its prototype
// and will therefore inherit, if and when needed, all
// the methods available on Foo.prototype.
Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.constructor = Bar;
Bar.prototype.toString = function () {
  return [this.prop1, 
this.prop2, 
this.prop3,  
this.prop4].join(':');
}
var foo = new Foo(1, 2);
var bar = new Bar(1, 2, 3, 4);
console.log(foo.toString());
console.log(bar.toString());
console.log('This must be true: ', foo instanceof Foo);
console.log('This must be false: ',foo instanceof Bar);
console.log('This must be true: ',bar instanceof Foo);
console.log('This must be true: ',bar instanceof Bar);

To play around with this, follow link.

Practice!

To practice what you have learned so far, follow this link. It has some failed tests, try reducing them to zero.

My name is Anand Suthar and thank you for reading my post today. This was just an attempt to try if TDD approach could help better understand the concept. Looking forward to add more failed tests in near future, comments and suggestions could greatly improve this.