What’s the purpose of prototype? [duplicate]

What’s the purpose of prototype? [duplicate]

Possible Duplicate:
Understanding prototypal inheritance in JavaScript

OK, So I am somewhat new to the idea of OOP in JS.
What is the difference between these two snippets of code written below:
function animal(){
this.name = ‘rover’;
this.set_name = function(name){
this.name = name;
}
}

function animal(){
this.name = ‘rover’;
}
animal.prototype.set_name = function(name){
this.name = name;
}

They both do the same thing, so what’s the difference?

Solutions/Answers:

Solution 1:

Using the prototype makes for faster object creation, since that function does not have to be re-created each time a new object is created.

When you do this:

function animal(){
    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
    }
}

The set_name function is created de novo each and every time you create an animal. But when you do this

animal.prototype.set_name = function(name){
    this.name = name;
}

The function does not have to be re-created each time; it exists in one place in the prototype. So when you call someAnimal.set_name("Ubu"); the this context will be set to someAnimal and (the one and only) set_name function will be called.

Related:  Get div height with plain JavaScript

There is one advantage to using the first syntax though: functions created in this manner will have access to private data:

function animal(){
    var privateData = 'foo'

    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
         alert(privateData); //will alert 'foo'
    }
}

Douglas Crockford calls functions created like this “privileged” for that reason: they have access to both public, and private data.

Solution 2:

The difference appears when you create new object from these function

var animal1 = new animal();

All objects created by the first function will have different name and set_name properties. However, all objects created by the second function will share the set_name property.

Solution 3:

In the first example, each separate animal has an own property for the set_name function, while in the second example they share the same function via their prototype.

The advantage of the first version is that the methods can access local (private) variables declared inside the constructor.

Related:  Set listener for store events in a controller

The advantage of the second method is that it needs less memory (since you only store the method once instead of a million times) and is more performatic in current JS engines.

Using the second method you can also modify or add methods to a class in a way that also affects instances that were already created.