What’s the purpose of prototype?

Question

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?

instance level shared member (non-static) for a class. e.g) Person.prototype.instance_counter = 0; //Can't be accessed with ClassName like Person.instance_counter (This is static.) — Kanagavelu Sugumar, Sep 12 '13 at 08:30

score 341 · Accepted Answer · edited Apr 07 '21 at 15:13

Using the prototype makes faster object creation since properties/methods on the prototype don't 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 method is created every time you create an animal. But when you do this

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

The method 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 method will be called.

There is one advantage to using the first syntax though: methods 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 methods created like this "privileged" for that reason: they have access to both public and private data.

score 37 · Answer 2 · answered Dec 08 '11 at 15:40

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.

score 31 · Answer 3 · answered Dec 08 '11 at 15:40

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.

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.

What’s the purpose of prototype?

3 Answers3

Linked

Related