Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!
15 Oct 2016

Javascript Prototype Demystified

enter image description here

If you are some one like me who comes from a background of traditional object oriented language like Java or C# or some thing similar, understanding Prototype based Object Oriented-ness has been a challenge.

In this article we would try to break down the two styles of OOPs and compare them side by side. We would use Java as an example of traditional OOP language or simply put Class style OOPs, just because I am more comfortable in Java.

In Class style OOPs, we have Classes as definition or blueprint of object where as instances of Classes are real objects, all the instances of a single Class or single blueprint has same behavior but different states which makes them different.

In JS or Prototype based OOP there is no blueprint, you may be tempted to say that the functions are blueprint but even functions are instances and which is why you can pass them around as variables.

    var person = function(){// Do some thing here};

    // Call some method with this method as argument.
    callThisPerson(person); 

From the point of view of JS person, OOP language should be about objects not classes, JS is about objects, every thing is an object, functions are object, object are object, prototype is object.

Once we understand every thing is an object and every thing inherits from object, it becomes little easier to understand. In Java, every thing inherits implicitly from Object, In JS every thing has parent reference to the object which it inherits from, which is prototype. The problem is that we try to compare class based inheritance to prototype inheritance but if we look at how object inheritance work in Java, its not much different.

Lets come to class based inheritance, in a normal class based inheritance we have a blueprint of a class which extends parents blueprint and then we create a new instance of this extended blueprint which has behavior of both parent and child.

In JS we would have a parent instance which would have its behavior and a child instance which would have its own behavior and then we point the parent reference of child to the parent instance to create inheritance.

    function Vehicle(){
     this.model = 'Vehicle';
     this.year = '1999';
    }
    var vehicle = new Vehicle();

    function Car(){
    this.model = 'Car';
    }
    Car.prototype = vehicle; // Now Vehicle is super of Car 
    var car = new Car();
    console.log(car.year);/// Should print 1999

If we see the above example by simply assigning prototype variable we have created a hierarchy. It is important to understand that prototype points to an instance which is why we have used existing instance instead of a new instance. Most of the example on web would do it like this.

    function Vehicle(){
     this.model = 'Vehicle';
     this.year = '1999';
    }
    var vehicle = new Vehicle();
    vehicle.year = '2020';

    function Car(){
    this.model = 'Car';
    }
    Car.prototype = new Vehicle(); 
        or Object.create(Vehicle.prototype); 
    // Create a fresh instance of parent  
    var car = new Car();
    console.log(car.year);/// Should still print 1999 instead of 2020

In this example the essence of instance based inheritance is lost as a new instance of parent is created every time.

In very simple terms, you can relate it to real world inheritance , in class based approach we are taking of generations and not individuals, like when you are talking about baby boomers, millennials while in prototype world, we are talking about lineage, the blood line, who is next in line for throne :)

Hope it helps clearing some of the confusion related Object Orientedness of JavaScript.


Stats:
258 views
Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!

Angular Directives Demystified

Directives are the most misunderstood aspect of angular JS. Learn how directives can help you keep your code clean.

Third wave of digital transformation

Third wave of digital transformation

Angularjs Tutorial: Understanding Scope

Scopes are one of the most important and rarely understood concept in angular, in this part we explore how scope works in angularjs.

Comments:

Leave your comments