In JavaScript, we have two ways of making a class and giving it public functions.

Method 1:

function MyClass() {

    var privateInstanceVariable = 'foo';

    this.myFunc = function() { alert(privateInstanceVariable ); }

}

Method 2:

function MyClass() { }



MyClass.prototype.myFunc = function() { 

    alert(I can't use private instance variables. :(); 

}

I've read numerous times people saying that using Method 2 is more efficient as all instances share the same copy of the function rather than each getting their own. Defining functions via the prototype has a huge disadvantage though - it makes it impossible to have private instance variables.

Even though, in theory, using Method 1 gives each instance of an object its own copy of the function (and thus uses way more memory, not to mention the time required for allocations) - is that what actually happens in practice? It seems like an optimization web browsers could easily make is to recognize this extremely common pattern, and actually have all instances of the object reference the same copy of functions defined via these constructor functions. Then it could only give an instance its own copy of the function if it is explicitly changed later on.

Any insight - or, even better, real world experience - about performance differences between the two, would be extremely helpful.