Question

Let’s say I have this code:

(function(global) {
    function Bar(foo) {
        this.foo = foo;
        return this;
    }

    Bar.prototype.getFoo = function() {
        return this.foo;
    };

    Bar.prototype.setFoo = function(val) {
        return (this.foo = val);
    };
})(this);

What is the difference between creating functions like setFoo with prototype and just doing it like this:

function Bar(foo) {
    this.getFoo = function() {
        return this.foo;
    };
}

I know what prototype is and what it means, I just can’t figure out, why some people assign functions with prototype, because if I assign them with this, they will be available also every time I create a new instance of Bar.

Answer 1

The quick answer = function sharing + smaller memory footprint

When you’re using prototype.functionName all instances share the same function (only one copy in memory), but if you use this.functionName in your constructor each instance has its own copy of the same function (exists multiple times in memory).

Using prototype has two implications:

1. Memory footprint – as mentioned
2. Subsequent function change on the prototype is reflected on all existing (and future of course) instances – there are rare occasions when one would like to do this, but it’s there any it can be used

Advanced – you can have both

You can also have both in which case the local copy has precedence over the prototype which means that you could do stuff like this:

function Crazy(name)
{
    this.name = name;
    this.callMe = function() {
        return "Where are you " + this.name;
    };
}

Crazy.prototype.callMe = function() {
    return this.name + " come here";
};

var inst = new Crazy("Robert");
inst.callMe(); // "Where are you Robert"
delete inst.callMe;
inst.callMe(); // "Robert come here"