What’s the purpose of prototype?

Quinton Pike picture Quinton Pike · Dec 8, 2011 · Viewed 56.4k times · Source

Possible Duplicate:
Use of 'prototype' vs. 'this' 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?

Answer

Adam Rackis picture Adam Rackis · Dec 8, 2011

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.


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.