JavaScript: defining function in constructor rather then using prototype - what is the difference?

Question

So, I am not a JavaScript expert, just trying to understand what the difference is between two following snippets of code. I have a project that I want to convert to TypeScript and I need to understand the difference between two code snippets being generated.

var Pony = (function () {
    function Pony() { }
    Pony.prototype.bite = function () {
        alert("Chomp!");
    };
    return Pony;
})();

var Pony2 = (function () {
    function Pony2() {
        var self = this;
        self.bite = function () {
            alert("Chomp!");
        };
    }
    return Pony2;
})();

More: http://stackoverflow.com/q/9772307/218196, http://stackoverflow.com/q/4386708/218196 — Felix Kling, Mar 29 '13 at 14:13

score 0 · Answer 1 · answered Mar 29 '13 at 14:26

The difference between the two is that you can get to the prototype of the first Pony via attributes on the object stored in var Pony and could expand upon or use the associated bits of that prototype elsewhere where as Pony2 would just be considered a function. So if you do not plan on using any sort of prototypical inheritance later on they are equivalent.

joelmdev · Answer 2 · 2013-03-29T15:53:55.820

0

As far as how you use them, there's no difference. However, from a performance standpoint the former method would be preferable. Let's extend your example a little bit:

var prototypePony1 = new Pony();
var prototypePony2 = new Pony();
var thisPony1 = new Pony2();
var thisPony2 = new Pony2();

prototypePony1.hasOwnProperty('bite'); //returns false
prototypePony2.hasOwnProperty('bite'); //returns false
thisPony1.hasOwnProperty('bite'); //returns true
thisPony2.hasOwnProperty('bite'); //returns true

Pony.prototype.bite = function() { alert('Nomnomnom!'); };
Pony2.prototype.bite = function() { alert('Nomnomnom!'); };

prototypePony1.bite(); //alerts 'Nomnomnom!'   
prototypePony2.bite(); //alerts 'Nomnomnom!'

thisPony1.bite(); //alerts 'Chomp!', instance property is accessed first   
delete thisPony2.bite;
thisPony2.hasOwnProperty('bite'); //returns false
thisPony2.bite(); //alerts 'Nomnomnom!'

In the example above, thisPony1 and thisPony2 both get their own copy of the bite function, since it was defined using this However, prototypePony1 and prototypePony2 both share the same copy of bite from Pony's constructor.

Once we define the bite prototype on Pony2, the instance property is still accessed first on thisPony1. It's not until we delete the instance property that we see the newly defined prototype property on thisPony2.

For more detailed info on defining object methods, have a look here.

edited Mar 29 '13 at 15:53

answered Mar 29 '13 at 14:31

joelmdev

11,083
10
65
89

Don't let the immediately executed functions in the OP's code fool you. The variables `Pony` and `Pony2` are constructor functions which can be used to the create multiple instances. It's not a "one time thing". – Felix Kling Mar 29 '13 at 14:44
Read too fast. And forgot my 'new's Editing accordingly. – joelmdev Mar 29 '13 at 14:53
Based on your link, isn't it the other way around, pony2a and pony2b get their own copy, while pony1a and pony1b, share. – epitka Mar 29 '13 at 14:56
I hadn't had my coffee this morning and got my variables backwards. Please have another look. – joelmdev Mar 29 '13 at 15:50
So, too sum it up, if I understand it correctly, if there will be some kind of inheritance then prototype is the one to use and if there will be many instances of the same type (for performance). Otherwise, as in case of ViewModel, where there is one instance without any inheritance it is pretty much the same. Correct? – epitka Mar 29 '13 at 18:11

score 0 · Answer 3 · answered Mar 29 '13 at 15:40

The answers above give a good overview on the difference between putting on the prototype and putting on the instance. As to your question about converting to TypeScript, below is how you would write them both:

class Pony {
    bite(){
        alert('chomp');
    }
}

class Pony2 {
    bite:  () => void;
    constructor(){
        this.bite = () => alert('chomp');
    }
}

JavaScript: defining function in constructor rather then using prototype - what is the difference?

3 Answers3