Although many C # or C ++ developers use legacy in their projects and when they want to learn or discover JavaScript, the first question they ask is: “But how can I inherit with JavaScript?”

In fact, JavaScript uses a different method than C # or C ++ to create an object-based language. It is a prototype-based language. The concept of prototyping implies that the behavior can be reused by cloning an existing object that acts as a prototype. Each object in JavaScript depends on a prototype that defines a set of functions and members that the object can use. No classes. Just objects. Each object can then be used as a prototype for another object.

This concept is very flexible and we can use it to mimic some concept like inheritance from OOP.

Legacy implementation

Let’s see what we want to create with this taxonomy using JavaScript:

First, we can easily create ClassA. Since there is no explicit class, we can define a set of behaviors (A class so…) by creating a function like this:

var ClassA = function ().
this.name = “Class A”;
A

This “class” can be made instantaneous using the new keyword:

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

And to use it using our object:

a.print ();

Pretty easy, isn’t it?

Complete sample only 8 lines long:

var ClassA = function ().
this.name = “Class A”;
A

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

var a = new ClassA ();

a.print ();

Now let’s add a tool to create a “legacy” in the classroom. This tool only needs to do one 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 the offspring of the first, we just need to use this code:

var ClassB = function ().
this.name = “Class B”;
this.surname = “I am a child”;
A

Inheritance (Classby, Class A);

Then since 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 (it);
console.log (this.surname);
A

In this case, the output will show this lie:

Class B

I am a child

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

Creating ClassC is now clear:

var ClassC = function ().
this.name = “Class C”;
this.surname = “I am the grandson”;
A

Inheritance formula (ClassC, ClassB);

ClassC.prototype.foo = function ();
// Do some fun things here …
A

ClassC.prototype.print = Function ().
ClassB.prototype.print.call (it);
console.log (“Looks like it’s working!”);
A

var c = new ClassC ();

c.print ();

And the output is:

Class C

I am a grandson

Looks like this is working!

More hands-on with JavaScript

This may come as a bit of a surprise, but Microsoft has a bunch of free tutorials on open source JavaScript, and we’re on a mission to build more with the new modern browser – Microsoft Edge.
Or our team learning series:

Practical performance tips to speed up your HTML / JavaScript (a 7-part series from responsive design to casual games to performance optimization)
• Modern Web Platform Jumpstart (Basics of HTML, CSS and JS)
তৈরি Create a universal Windows app with HTML and JavaScript Jumpstart (use the JS you already created to create an app)

Last but not least, check your websites for the modern web and write to us at moder[email protected] with any questions related to Microsoft Edge.

Click here to see if your website meets the interoperable web standards and is ready for a variety of modern browsers, including Microsoft Edge.