Question

This would presumably be the safest way (Case A):

var myClass = function() { };
myClass.prototype = {
    doSomething : function() { alert('Something'); }
};

This is the alternative (Case B):

var myClass = function() {
    this.doSomething = function() { alert('Something'); };
};

I’m under the impression that by doing this as shown in Case B, doSomething would be a member, and the function would be defined once for each myClass object I instantiate so that it will exist 100 times in memory for 100 instances, whereas in Case A the function will only exist in one place in memory and different instances will merely reference the prototype.

Am I understanding this correctly?

As a bonus question: When doing it as in Case B, chrome developer gives me intellisense for doSomething, but I must expand __proto__ for an instance to see it. How come it doesn’t show up on the object itself? That is, why doesn’t prototype members show on the object, but get stuck back down on __proto__? I would have preferred if the __proto__ stack would get flattened and show up on the object directly. Is there another Case that will allow this to happen?

Answer 1

Firstly, in case B, you are merely creating a global function, not attaching it to the instance. You meant:

this.doSomething = function() { }

Secondly, the first will be faster. Though I can’t find the link now, jQuery honcho John Resig did a detailed blog post on this showing speed tests on prototypal inheritance of methods vs. methods declared on the instance. Inheritance was notably faster.

In terms of ethos, I’ve always much favoured inheritance. This is the place for reusable, cross-instance functionality. Adding it to each instance has the sole benefit of allowing you to declare methods inside a single, convenient closure, in your constructor, but that’s it.

If this is your reason for liking pattern B, it’s possible to do this whilst still a) having the methods inherited; b) not redeclaring them at every instantiation.

function SomeClass() {
    if (!SomeClass.prototype.someMethod) {
        SomeClass.prototype.someMethod = function() {}
    }
}

This will slightly slow down the initial instantiation, though, as it is responsible for setting up the prototype – not really the job of an instantiation process.

There is also a programmatical difference to be aware of between your two cases:

 function SomeClass(name) {}
 SomeClass.prototype.someMethod = function() {};
 var instance = new SomeClass();
 console.log(!!instance.someMethod); //true
 console.log(instance.hasOwnProperty('someMethod')); //false

The last line is false because the method is inherited, not owned by the instance. With your pattern B, this will resolve to true.