Firstly let us define what is Prototype?

Prototype is the base/model on which something is built/referred.

 

Say for example : This fighter plane is based on that Prototype/model

 

Secondly let us define what Prototype means in “Object Oriented Terms”?

Object Oriented Programming languages like C#, Java etc it is nothing but Inheritance.

 

For Example : Class Child inherits/extends Base.

 

Class Base {

 

}

Class Child extends Base{

 

}

Thirdly let us understand what Prototype means in “Javascript” World?

In Javascript it means “Object based inheritance” Now let us achieve this object based inheritance with simple example:

Model / Prototype



function Student() {

    this.studentName = "";

}

var stud = new Student();

function StudentCRUD() {

    this.add = function() {

        alert("add----> " + this.studentName)

    }

    this.delete = function() {

        alert("Delete---> " + this.studentName);

    }

}

StudentCRUD.prototype = new Student();

var obj = new StudentCRUD();

obj.studentName = "Student1"; // This property is of Parent/Base

obj.add(); // This function is of Child

...............................................................................

Output: add----> Student1

By looking at the above example we can write three important points:

  • Prototype is a object which points to other object.

  • Every object has a Prototype (Default is Object).

  • It follows “Method Chaining Model”

Let us understand these 3 points in detail

 

1.Every object has a Prototype (Default is Object).

Here you can see __proto__ is pointing to “Object” because it is a simple Object.

 

Screenshot from 2017-11-19 21-36-50

 

 

 2. Prototype is a object which points to other object.

Here you can see __proto__ is pointing to “Student” not “Object”

 

Screenshot from 2017-11-19 21-37-53

 

 

3. It follows “Method Chaining Model”.

To understand this let us change our program a little bit lets move “delete” function to base class.

 

 

function Student() {

    this.studentName = "";

    this.delete = function() {

        alert("Delete---> " + this.studentName);

    }

}

var stud = new Student();

function StudentCRUD() {

    this.add = function() {

        alert("add----> " + this.studentName)

    }



}

StudentCRUD.prototype = new Student();

var obj = new StudentCRUD();

obj.studentName = "Student1"; // This property is of Parent/Base

obj.delete(); // This function is of Parent

...............................................................................

Output: Delete----> Student1

This below flow chart explains better.

Untitled Diagram (5)

 

You can also find fiddles for above programs:

https://jsfiddle.net/tb398oq8/2/

https://jsfiddle.net/8spdbasb/

 

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.