Simple Inheritance with JavaScript

Originally published at: http://www.sitepoint.com/simple-inheritance-javascript/

This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

A lot of my friends are C# or C++ developers. They are used to using inheritance in their projects and when they want to learn or discover JavaScript, one of the first question they ask is: “But how can I do inheritance with JavaScript?”

Actually, JavaScript uses a different approach than C# or C++ to create an object-oriented language. It is a prototype-based language. The concept of prototyping implies that behavior can be reused by cloning existing objects that serve as prototypes. Every object in JavaScript decends from a prototype which defines a set of functions and members that the object can use. There is no class. Just objects. Every object can then be used as a prototype for another object.

This concept is extremely flexible and we can use it to simulate some concepts from OOP like inheritance.

Implementing Inheritance

Let’s visualize what we want to create with this hierarchy using JavaScript:

First of all, we can create ClassA easily. Because there are no explicit classes, we can define a set of behavior (A class so…) by just creating a function like this:

var ClassA = function() {
    this.name = "class A";
}

This “class” can be instantiated using the new keyword:

var a = new ClassA();
ClassA.prototype.print = function() {
    console.log(this.name);
}

And to use it using our object:

a.print();

Fairly simple, right?

The complete sample is just 8 lines long:

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a.print();

Now let’s add a tool to create “inheritance” between classes. This tool will just have to do one single thing: clone the prototype:

var inheritsFrom = function (child, parent) {
    child.prototype = Object.create(parent.prototype);
};

This is exactly where the magic happens! By cloning the prototype, we transfer all members and functions to the new class.

So if we want to add a second class that will be a child of the first one, we just have to use this code:

var ClassB = function() {
    this.name = "class B";
    this.surname = "I'm the child";
}

inheritsFrom(ClassB, ClassA);

Then because ClassB inherited the print function from ClassA, the following code is working:

var b = new ClassB();
b.print();

And produces the following output:

class B

We can even override the print function for ClassB:

ClassB.prototype.print = function() {
    ClassA.prototype.print.call(this);
    console.log(this.surname);
}

In this case, the produced output will look like this:

class B 
I’m the child

The trick here is to the call ClassA.prototype to get the base print function. Then thanks to call function we can call the base function on the current object (this).

Continue reading this article on SitePoint
2 Likes

Nice article. I have a question. How come this code works even when you remove all the calls to inheritsFrom?
I still get:

class C
I’m the grandchild
Sounds like this is working!

Cause the example is a bad one!
If every new class also has a print method, of course it will work, now if it kept the output from the base class, now that would show something…

Also let me point out, implementing methods after declaring an instance? Sure it can be done, but still not a good way to go, what if you inherit before you do the declaration? what then?

Keep it simple. Just use constructor functions and instantiate new objects with the ‘new’ cmd

You mean using a constructor like this?

var ClassA = function() {
    this.name = "class A";
}

And instantiating it like this?

var a = new ClassA();
ClassA.prototype.print = function() {
    console.log(this.name);
}

So that you can use it like this?

a.print();

Fairly simple, right? They do that above in the article.

Or were you meaning something different in regard to the inheritance?

I prefer to wait to JS6 to use the proper inheritance.
this is complected

That just provides a wrapper around one of the ways that JavaScript already allows for inheritance. It isn’t introducing anything new, just a slightly different way to write the same code.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.