Inheritance in JavaScript

As I have already mentioned I am .NET developer and something what is natural for js for me is just strange, one of such things is that JavaScript has only functions. Authors of other languages developed a lot of stuff, for example in C# we have:

  • Classes (static, abstract and usual)
  • Structures
  • Interfaces
  • Enums
  • Methods
  • Properties
  • Arrays
  • Delegates
  • Events
  • Anonymous Methods
  • Partial methods and classes
  • other…

But in JavaScript we have only functions. Sounds sad, but it’s true, even arrays in JavaScript are not typical arrays, they are just function that behave like arrays.

So how to implement inheritance without classes?

Actually there is a few possible solutions, and each project choose implementation which fits his needs best. Let’s take a look on first classic implementation of inheritance

Prototypal inheritance

Every function object has property called prototype and this property is the place where we will look for any function or variable that are not found in function object itself. So if we will try to call some missing function on the object, JavaScript engine will first check object itself, if there is no function with such name then it will check prototype property of that object if prototype has this function it will execute this function, if not, it will check if object which is in prototype has it’s own prototype … so it’s like a chain, we will check inner objects and their prototype until we get some null and than JS Engine will return “undefined”.

    1. son.someFunction();
    2. son.prototype.someFunction();
    3. son.prototype.prototype.someFunction(); //undefined will be returned as no such method in a chain.

Fortunately almost like everything in JavaScript, prototype can be changed and if we will put the “base” object into prototype we will add all the stuff that base object have to object that owns prototype. Here is example of simple object:

var Father = function(surname, firstname){
    this.surname = surname;
    this.firstname = firstname;
}

Father.prototype.getSurname = function(){
    return this.surname;
}

This is the function which creates new object Father, with two variables, and it will be called every time we will create new object. Also we have added method to the prototype property. This method simply returns the surname of the Father. By the way we could define this method inside the constructor function using this.getSurname = function(){…} but it might cause some performance problems as every time we will create new object method will be copied to newly created instance and it’s not what we want, we want to have shared method definition for all the instances.

So we know how to define objects now lets create derived class that will inherit all the members and add something new:

var Son = function(firstname){
    this.firstname = firstname;
}

Son.prototype = new Father("Bats", "Bohdan");

Son.prototype.sonOf = function(){
    return this.surname;
}

Line 5 is inheritance itself, we replace Son.prototype property with our Father object and as I already mentioned, if we won’t find some function in Son definition js engine will look for it in prototype property, in our case it will be Father object. You might say that it’s composition, and it really looks like but its’ a bit different as we can directly from son object call base functions and access base variables, override them etc.

Here is the result:

image

It works, we get the expected result, but this implementation for me as for .NET developer looks ugly. I get used with classes structure, when constructor is inside of the class together with all methods, properties etc. So here is a bit cleaner version of inheritance called Functional inheritance:

Functional inheritance

I won’t describe it as it really simple and with basic understanding of JavaScript you will get the idea without any problems.

function Father(surname, firstname){
    return {
	    surname : surname,
	    firstname : firstname,

	    getSurname : function(){
		    return this.surname;
		}
    };
}

function Son(firstname){
	var that = Father("Bats", firstname);
	that.firstname = firstname;
	that.sonOf = function(){
		    return that.surname;
		};
	return that;
}

And here is the prove that it works:

image

It’s very simple implementation and looks better than previous, also it gives as possibility to hide some members and that is nice benefit.

In the next post we will continue to work on our Single Page Application.

See you soon

PS
if you have read post, believing, that you will understand how it works till the end of the post and you didn’t, please don’t hesitate to ask some questions in comments.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s