Mar 10, 2015

Inheritance in JavaScript is implemented in a quite different way as it is in higher level languages like C# and Java. In today's blog we will dig deeper into how Inheritance works in JavaScript and for that the concept of prototype plays a central role.

Let's say you want to define a custom object Account. You could use an object literal, as for example

var Account = { id: 123, name: “John Doe”, balance : 0}

But to be as close as possible to the implementation provided by languages like C# it would be more advisable to define the object with a function and then create instances with the new operator as if we had a class called Account, although JavaScript really has no class definition.

var Account = function (id, name, balance) { this.id = id; this.name = name; this.balance = balance; }

Now we can create as many instances of Account as needed and for each one we pass to the constructor the values for id, name and balance. Each instance is independent form the others.

var acct1 = new Account (1001, “John Doe”, 100); var acct2 = new Account (1002, “Jane Smith”, 150);

Next we need to add methods to our Account object. This is where the prototype comes into play:

Account.prototype = { deposit: function(amount) { this.balance += amount; }, withdraw: function(amount) { this.balance -= amount; } }

We use those methods to add or subtract from the balance property:

acct1.deposit(500); //now acct1 balance is 600 acct2.withdraw(100); //now acct2 balance is 50

So the JavaScript custom object has a constructor, properties and methods just like classes in C#. But what about Inheritance?

Let's say we want a SavingsAccount object that has the same properties as an Account plus an interest. Unlike C# there is no direct way to just say that a derived class inherits from a base class and automatically gets all properties and methods from the base. We need to repeat the declaration of the constructor and append the additional property:

var SavingsAccount = function (id, name, balance, interest) { this.id = id; this.name = name; this.balance = balance; this.interest = interest; }

For the methods it is easier because all the methods are defined in the prototype so we can just assign the prototype for the SavingsAccount:

SavingsAccount.prototype = Account.prototype;

If we had dozens of methods defined in the prototype of Account they would all be inherited by SavingsAccount. So with methods we do get a behaviour that is quite similar to class inheritance in C#, but we had to add all the “inherited” object instance properties again to the constructor of SavingsAccount. Note that all we are really doing is to simulate class inheritance by simply passing the prototype from one object the other that “inherits” from it.

Now we can use our inherited SavingsAccount in the expected way:

var savings = new SavingsAcoount (1010, “John Doe”, 0, 4.5); savings.deposit(500); savings.withdraw(100); alert(savings.balance); //displays 400

If we want to add additional methods to SavingsAccount we use the prototype:

SavingsAccount.prototype.payinterest = function() { this.balance = ( 1 + this.interest /(100*12) ) * this.balance ; }

Note that we are not completely redefining the prototype, but only adding to it a new method called payinterest. If we needed to override one of the existing methods we would just assign a different function to the existing method.

So you can see that the whole concept of inheritance in JavaScript is based on the prototype, so it makes a lot of sense to refer to JavaScript inheritance as prototypal inheritance.

To learn more about JavaScript we recommend the course 20480 : Programming in HTML5 with JavaScript and CSS3.