Implementing Inheritance with JavaScript

By Promotion | Updated Sep 23 2015
Implementing Inheritance with JavaScript
HIGHLIGHTS

If you are thinking, “How can I implement inheritance with JavaScript?”, read on. Pracheta walks you through examples to get started with Inheritance in Javascript. You can follow her at @prachetab for further updates.

While lot of C# or C++ developers are used to use 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 depends 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 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 image what we want to create with this hierarchy using JavaScript:

First of all, we can create ClassA easily. Because there is 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: Cloning 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 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 lie this:

class B 

I’m the child

The trick here is to 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).

Creating ClassC is now obvious:

var ClassC = function () {
this.name = "class C";
this.surname = "I'm the grandchild";
}

inheritsFrom(ClassC, ClassB);

ClassC.prototype.foo = function() {
 // Do some funky stuff here...
}

ClassC.prototype.print = function () {
ClassB.prototype.print.call(this);
console.log("Sounds like this is working!");
}

var c = new ClassC();

c.print();

And the output is:

class C 

I’m the grandchild 

Sounds like this is working!

More hands-on with JavaScript

It might surprise you a bit, but Microsoft has a bunch of free learning on many open source JavaScript topics and we’re on a mission to create a lot more with new modern browser – Microsoft Edge.
Or our team’s learning series: 

•    Practical Performance Tips to Make your HTML/JavaScript Faster (a 7-part series from responsive design to casual games to performance optimization)
•    The Modern Web Platform JumpStart (the fundamentals of HTML, CSS, and JS)
•    Developing Universal Windows App with HTML and JavaScript JumpStart (use the JS you’ve already created to build an app)

Last but not the least, test your websites for modern web at and write to us with any queries related to  Microsoft Edge at modernweb@microsoft.com

Click here to check if your website adheres to interoperable web standards and is ready for various modern browsers, including Microsoft Edge

logo
Promotion

Digit caters to the largest community of tech buyers, users and enthusiasts in India. The all new Digit in continues the legacy of Thinkdigit.com as one of the largest portals in India committed to technology users and buyers. Digit is also one of the most trusted names when it comes to technology reviews and buying advice and is home to the Digit Test Lab, India's most proficient center for testing and reviewing technology products.

We are about leadership-the 9.9 kind! Building a leading media company out of India.And,grooming new leaders for this promising industry.