prototypal inheritance in javascript

PROTOTYPAL INHERITANCE JAVASCRIPT

In this session you will be learning how one object acquire/inherit properties and methods from other objects.

Prototype inheritance is one of the core concept of javascript.

Javascript is the only programming language who's inheritance concept is different from other programming language.It create confusion if the developer knows other programming languages.

In javascript ,Inheritance is done through prototypes not through class or constructors like in c++ or java.

IMP-NOTE = Every function expression is a constructor in javascript

DIFFERENCE BETWEEN PROTOTYPAL INHERITANCE AND CLASSICAL INHERITANCE ?

PROTOTYPAL INHERITANCE

Prototypal are flexiable.

Javascript is prototype based language.

It is simple as it deals with only objects.

Some times mutable and immutable.

One object inherit properties from other object

It provides best expressive power.

CLASSICAL INHERITANCE

Classical inheritance are immutable.

We cannot update anything during run time.

It's complicated due to abstract classes, interface and final classes.

One class inherit prperties from another class.

C++ ,java are the classical based languages.

some classical based languages does not support multple level inheritance.

WHAT IS INHERITANCE ?

Inheritance is one of the important concept in object oriented programming.

Inheritance in javascript is different from other programming language.

In classical inheritance,methods and properties from parent class gets derived to child class whereas in javascript, inheritance is done by prototype object.

WHAT IS PROTOYPE ?

Prototype means one object trying to access methods and properties from other objects.

In javascript, all functions are objects so they can have some properties in it.

One of the property could be "prototype",which is an object.

prototypal inheritance instances

The above figure shows that :-

x() has a property called "x.prototype".

When ever you create a function, automatically it will have a property called "prototype" which is further assigned to an empty object.

In javascript ,there is no specific difference between "normal" functions and "constructor" functions

LET'S CREATE A CONSTRUCTOR


                  <script>
                var x=function(a,b) // constructor x
                {
                  this.a=a;
                  this.b=b;
                }
               </script>
                

In the above code a constructor is created with name "x".

It contains two parameters.

Both parameters hold int values and are further stored in their respective store box.

"this" keyword is used to specify the current object.

LET'S CREATE INSTANCES


               <script>
                var x1 = new x(10,20);
                var x2 =new x(100,200);
               </script>
                

In javascript "new" keyword is used to create object.

"x1" is the first object created.As object is created, constructor function is called with two parameter values that is "10" and "100".I this case variable "a" holds "10" and variable "b" holds "100".

"x2" is the second object created.As object is created, constructor function is called with two parameter values that is "100" and "200".I this case variable "a" holds "100" and variable "b" holds "200".

prototypal inheritance instances
  • In the above image you can see that two objects has been created.
  • x1 and x2 are distinct objects.
  • These objects are created from constructor x(),so it inherits properties and methods from x().
  • As you can see both the objects hold the variables "a" and "b".
  • If we create 100 objects than 100 copies of variable "a" and "b" will be created.
  • In this scenario, variables are loaded into the memory whenever objects are created.

USING PROTOTYPE WE CAN SOLVE THIS PROBLEM

Below image shows what actually hapens when constructor is created.


                <script>
              var x=function(a,b)    // constructor x
              {
                this.a=a;
                this.b=b;
              }
             </script>
              
prototypal inheritance instances

Two objects are created after creation of constructor

  • One object with the constructor name
  • Other object with constructor name and keyword "Prototype".syntex :(constructor_name.prototype)

The first object(left-hand side) gets a property assigned by javascript engine called "prototype".You can see it in the image.

The second object(right-hand side) gets a property assigned by javascript engine called "__proto__".You can see it in the image.

Actually the second object is the prototype object of the first object.That means the first object has been linked to second object as shown in image with arrow mark.

Let's see what happens in the background when objects(instances) are created for constructor function.

prototypal inheritance instances

when object x1 and x2 are created, javascript engine automatically adds prototype property to it.As you can see "__proto__" in the image.

As you can see in the above image two copies of variables "a" and "b" has been created in object x1 and x2 respectively.

One pair of variables "a" and "b" are stored in object x1 and the other pair are stored in object x2.This leads to memory reloading whenever new objects are created.

As you can see in the above image both object "x1" and "x2" are linked to object prototype of constructor function.That is called "prototype chain".

Let's modify the code to achive prototype


                 <script>
               var x=function(a,b)    // constructor x
               {
                 this.a=a;
                 this.b=b;
               }
               x.prototype.c="10";     //new variable "c"
              </script>
               

Here we have copied the code from above example with minor addition.

"a" and "b" are the properties of the constructor x().

In javascript ,javascript engine helps us to create brand new "prototype" property which is available to all objects.

In the above example "x.prototype.c" is the new property of constructor x().

prototypal inheritance instances

In the above image you can see that prototype object of constructor "x" function holds the value of variable "c".

Now this variable "c" is available to n number of objects(x1,x2,x3,....xn) with a single copy of it.

Meaning that any object can access variable "c".

Below is the complete process diagram for prototypal inheritance

prototypal inheritance instances

Below is the complete javascript code for prototypal inheritance


      <script>
         var x=function(a,b)    // constructor x
         {
           this.a=a;
           this.b=b;
         }
         x.prototype.c="10";     //new variable "c"
         var x1 = new x(10,20);
         var x2 =new x(100,200);
         document.write(x1.a+""+x1.b+""+x1.c); //output 10 20 10
         document.write(x1.a+""+x1.b+""+x1.c); //output 100 200 10
        </script>
               

This is how prototype inheritance works...

Here we come to end of the article.I hope you have loved and understood the topic.Thank you

About author
Supreet Patil
I am a web developer.I have started the journey of web development two years ago. I have shared a bit of one of mini project.I hope you have loved it.
E-mail:psupreet12@gmail.com
Leave a reply