Background

Javascript is a prototype based language. But what does that mean? First let’s work on some terminology here. Prototype basically means a model of something. I have a Java/C# background so this was pretty confusing to me at first that’s why we’re taking baby steps to understand what we’re dealing with here.

Anyone one who’s been working with Classical model of OOP thus folks doing Java/C++/C# or anything along those lines will find Javascript OOP a little weird. Let’s get to work.

We will attempt to create a class hierarchy using Employee object for instance. We will approach this from a classical model perspective and prototypical perspective to see how these two differ.

1. Classical model example: Java

public class Employee{
//properties
   private static String FirstName;
   private static String LastName;
   private static int Age;
   //constructor
  //special method btw 
   public Employee(String firstName,String lastName,int age){
      FirstName = firstName;
      LastName = lastName;
      Age = age
   }
//Methods or functions

//gets employee first name
   public string GetFirstName(){
      return FirstName;
   }
   public string GetLastName(){
      return FirstName;
   }
   public int GetAge(){
      return FirstName;
   }

}

Inheritance

public class Contractor Extends Employee{
   //properties
   private static int contractorBadgeId;
   //constructor
   //special method btw 
   public Contractor(){
      super("Seth","Johns",30);
      contractorBadgeId = 10;
   }
  //Methods or functions
   public int GetBadgeId(){
      return contractorBadgeId;
   }
}

Now create an instance of Contractor object

Contractor salesEngineer = new Contractor ();

That was a hierarchy example of classical model. Now let’s look at a similar example in javascript

2. Prototypal model: Javascript

By the way there’s no concept of public|private|protected in javascript. You could achieve similar thing but let’s save that for another day. As such we won’t be implementing getters and setters like we did in the Java example. Let’s jump to it 🙂

//Employee object
//Constructor function
function Employee(firstName,lastName,age){
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

Inheritance

//Contractor object
//Constructor function
function Contractor(){
   //properties
   //initialize object with Employee object 
   Employee.call(this)
   //properties
   this.contractorBadgeId = 10;
}
//inherit/associate Employee object
Contractor.prototype = Object.create(Employee.prototype)

Lets stop there for a second, I know things are getting weird now if you have Classical model kind of background. You’re not alone 🙂

In prototypal model inheritance works mainly by “association”,meaning, we’re not creating an Instance of Employee object but rather we’re associating Employee object to Contractor object. Let’s proceed.

Now let’s create sales engineer object

var salesEngineer = new Contractor();

Now we have created a hierarchy in prototypical model.

Summary
This example shows the difference between classical model and prototypical model to highlight concept of Inheritance in javascript.

We looked at inheritance in classical model and inheritance in prototypical model. Its important to understand the two especially for people like me getting deep into Javascript with a Java/C#/C++ background. Check out my next post on interacting with Javascript objects. Bye for now.

NB(update)
There’s a confusion about whether the above javascript code is “classical model” pattern or prototypal model pattern. This example is how you would do “classical model pattern” in javascript. For the actual prototypical pattern approach or the newer way to do inheritance in Javascript that most modern projects are using will be in the next post just to clear some of this confusion.

Advertisements