Object Oriented Programing in javascript featuring inheritance (prototypal model)

In object oriented programing (oop) one of the most interesting feature is inheritance. In this feature, information will pass down to the child class from parent class without changing any information in child class.

In javascript classes are represented in form of functions. Functions in javascript will work as classes. In JavaScript, objects are pairs of keys and values.

Whenever we create a function, it is as follows:

<script>
        function myfunc(){
            <!--other functions or line of codes-->      
        };
</script>

In javascript functions, the main work goes behind the scene every time we create a function it also creates three properties by default.

  1. Name
  2. Length
  3. Prototype

The property prototype is the subject of discussion here. This property supports a unique feature of oop, the inheritance. Prototype is an empty object which allows to add members. When a function is created prototype points towards another object. Suppose myfunc() has a property named prototype which in turns point to an object of myfunc(). This js object also has a property named ‘constructor’ which in turns points to the same function that we have created in the myfunc().

With the prototype a method can be invoked from anywhere in the inherited tree.

We can create such tree with multiple objects extending single object prototype.

Following is an example –

var teacher = {function}
//here teacher is the beginning class
//teacher.prototype is null

var student1 = Object.create(teacher)
student1.value= integer;
//here student1 is created from teacher.
//student1 has further value embedded in his properties.
var student2 = Object.create(student1)
//student2 is an object of student1.
//student2 does not have any other properties than prototype.

As we can see in the above example the teacher prototype are pointing to the objects . We created a new object by invoking,

Object.create(teacher)

The parameter tells js what  should be the object’s prototype. We can also look up to an object’s prototype by invoking Object.getPrototypeOf(object name)” . So, whenever we call the function in teacher from student1 or student2 , then it will follow up the inheritance tree using prototype to get to teacher for the specified function. Prototype model is also useful for adding custom properties and custom methods.

Useful features of prototype
  1. It is easy to use when dealing with different types of browsers.
  2. Using prototype relieves pressure from DOM.
  3. Prototype helps working with html forms.
Utility methods of prototype

There are utility methods within prototype which helps us in Javascript Programming.

Those are:

  1.  $() – Returns the passed element.
  2.  $A() – Converts an argument into an array.
  3.  $F() – Returns value of a form.
  4.  $R() – Creates an ObjectRange object.

Except those, there are useful methods in prototype.

Array methods of prototype

As prototype works with array in every step. It also requires some methods to manage those arrays.

  1. Clear() – Clears the array.
  2. Clone() – Returns a duplicate of the array, leaving the original array intact.
  3. indexOf() – Returns the position of the first occurrence of the argument within the array.
  4. Size() – Returns the size of the array.
  5. Last() – Returns the last item in the array.

These are the basic methods that prototype uses.

OOP in javascript featuring inheritance(classical model)

Like prototypic model javascript inheritance is used to another model which is classical model. This model adopts the familiar model of classes, public and private scopes, inheritance, and getters and setters seen in other Object Oriented languages.

Below is a sample code to understand classical model better.

// Shape - superclass
// x location of shape's line
function Shape(x) {
  this.x = x;
}
// Superclass method
Shape.prototype.move = function(x) {
  this.x += x;
}
// square - subclass
function square(x) {
  // Call constructor of superclass to initialize superclass-derived members.
  Shape.call(this, x);
  // Initialize subclass's own members

  this.x = x;
}
// square derives from Shape
square.prototype = Object.create(Shape.prototype);
square.prototype.constructor = square;

// Subclass methods. Add them after Circle.prototype is created with
// Object.create
square.prototype.area = function() {
  return this.x * x;
}

In the above set of coding as we can see in superclass we are declaring the method where as in later at superclass method we are initializing subclass where the real work is happening.

The one that actually performs the feat of inheritance is these two lines.

square.prototype = Object.create(Shape.prototype);

square.prototype.constructor = square;

The first line sets up the prototype chain.

So that is how – we express classical inheritance in JavaScript. It is very explicit.

Limitations of classical model
  1.  Classical model effectively parses functions twice, once for the original declaration, and once again to properly set up function scope.
  2.  Methods should only be defined in the class definition. Methods assigned as properties or returned using a getter should be avoided.
  3.  Variable names are case-insensitive.
Difference between classical model and prototypal model

In the previous few lines we have discussed the formation, features and limitations of both classical model and prototypal model.

So as a conclusion, in classical model, we work with classes. We create objects of the class and also we extend those classes to reuse their features. Whereas , in prototypal model we are used to work with objects. We make copy of the same objects and work with the copies.

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

1 thought on “Object Oriented Programing in javascript featuring inheritance (prototypal model)

Leave a Reply

Your email address will not be published. Required fields are marked *