Concept of Prototype in Javascript

Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is accomplished through a process of decorating existing objects which serve as prototypes. This model is also known as class-less, prototype-oriented, or instance-based programming.

When you define a function within JavaScript, it comes with a few pre-defined properties; one of these is the illusive prototype.

Each object in javascript actually has a member called “prototype”, which is responsible for providing values when an object is asked for them. Adding a property to the prototype of an object will make it available to that object, as well as to all of the objects which inherit from it.

object.prototype.name=value

Prototype allows you to make classes. if you do not use prototype then it becomes a static.

Here is a short example :

var obj = new Object();
obj.test = function() { alert('Hello?'); };

In the above case, you have static function call test. This function can be accessed only by obj.test where you can imagine obj to be a class.

where as in the below code

function obj()
{
}
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

The obj has become a class which can now be instantiated. Multiple instances of obj can exist and they all have the test function.

  • A function’s prototype: A function’s prototype is the object instance that will become the prototype for all objects created using this function as a constructor.
  • An object’s prototype: An object prototype is the object instance from which the object is inherited.

Prototype inheritance

Prototype inheritance is a form of object-oriented code reuse. Javascript is one of the only [mainstream] object-oriented languages to use prototypal inheritance. Almost all other object-oriented languages are classical.

  • In classical inheritance, the programmer writes a class, which defines an object. Multiple objects can be instantiated from the same class, so you have code in one place which describes several objects in your program. Classes can then be organized into a hierarchy, furthering code reuse. More general code is stored in a higher-level class, from which lower level classes inherit. This means that an object is sharing code with other objects of the same class, as well as with its parent classes.
  • In the prototypal inheritance form, objects inherit directly from other objects. All of the business about classes goes away. If you want an object, you just write an object. But code reuse is still a valuable thing, so objects are allowed to be linked together in a hierarchy. In javascript, every object has a secret link to the object which created it, forming a chain. When an object is asked for a property that it does not have, its parent object is asked… continually up the chain until the property is found or until the root object is reached.

The following example can help give more insight into the whole Prototype Concept.

Consider the following scenario :

We have a Employee class, there are different types of Employees like Managers, Supervisors, Agents etc. But each type is actually inheriting Employee.

Example:

	//Define a functional object to hold employee in JavaScript
	var Employee = function(name) {
	    this.name = name;
	};
	//Add dynamically to the already defined object a new getter
	Employee.prototype.getName = function() {
	    return this.name;
	};
	//Create a new object of type Employee
	var judy= new Employee("Judy");
	//Try the getter
	alert(judy.getName());
	//If now I modify employee, also Judy gets the updates
	Employee.prototype.alertMyName = function() {
	    alert('Hello, my name is ' + this.getName());
	};
	//Call the new method on john
	judy.alertMyName();

Here in above code we extended the base object, now we will create a child object and inherit it from base class.

	//Create a new object of type Manager by defining its constructor.
	// It's not related to Employee for now.
	var Manager = function(name) {
	    this.name = name;
	};
	//Now I link the objects and to do so, we link the prototype of Manager
	//to a new instance of Employee. The prototype is the base that will be
	//used to construct all new instances and also, will modify dynamically
	//all already constructed objects because in JavaScript objects retain
	//a pointer to the prototype
	Manager.prototype = new Employee();
	//Now I can call the methods of Employee on the Manager, let's try,
	//first I need to create a Manager.
	var myManager = new Manager('John Smith');
	myManager.alertMyName();
	//If I add new methods to Employee, they will be added to Manager,
	//but if I add new methods to Manager they won't be added
	//to Employee. Example:
	Manager.prototype.setSalary = function(salary) {
	    this.Salary = salary;
	};
	Customer.prototype.getSalary = function() {
	    return this.Salary;
	};
	//Let's try:
	myManager.setSalary(30000);
	alert(myManager.getSalary());

While as said I can’t call setSalary(), getSalary() on a Employee. Because parent class does not have child class function.

The ‘prototype’ property is not the real prototype (__proto__) of the function.

Foo.__proto__ === Foo.prototype //=> false

This of course generates a lot of confusion as people use the term ’prototype’ to refer to different things. I think that a good clarification is to always refer to the special ’prototype’ property of functions as ’the function prototype’, never just ’prototype’.

The ‘prototype’ property points to the object that will be asigned as the prototype of instances created with that function when using ’new’. Confusing? This is easier to explain with an example:

function Person(name) {
  this.name = name;
}
// the function person has a prototype property
// we can add properties to this function prototype
Person.prototype.kind = ‘person’
// when we create a new object using new
var zack = new Person(‘Zack’);
// the prototype of the new object points to person.prototype
zack.__proto__ == Person.prototype //=> true
// in the new object we have access to properties defined in Person.prototype
zack.kind //=> person

Thankyou for reading. Cheers.

2 Comments on "Concept of Prototype in Javascript"


  1. I noticed that it’s hard to find your blog in google, i found it on 20th spot, you should get some quality backlinks to rank it in google and increase traffic. I had the same problem with my website, your should search in google for – insane google ranking boost – it helped me a lot

    Reply

Leave a Reply

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