Why is defining JS prototype functions separately faster than in a dictionary?

Question

This may seem like a particularly obscure point, however I am attempting to improve my grounding in the Javascript language as a whole (more specifically its best and most efficient practices).

Whilst testing a theory in http://jsperf.com/ I came up with some odd results:

Suppose we have two "identical" prototypes, defined as follows:

Object1

var Object1 = function() {}

Object1.prototype.defaults = {
    radius: 400,
    up: 1
}

Object1.prototype.centerOffset = function() {
    return this.defaults.radius*this.defaults.up;
}

Object2

var Object2 = function() {}

Object2.prototype = {
    defaults: {
        radius: 400,
        up: 1
    },

    centerOffset: function() {
        return this.defaults.radius*this.defaults.up;
    }
}

Object1 has a consistent (if marginal: ~3%) speed advantage over Object2 when performing the following simple operations:

var o = new Object1();
var offset = o.centerOffset();

&

var o = new Object2();
var offset = o.centerOffset();

You can run the tests yourself here. I am using Chrome 25 on OSX 10.6.8.

What I would like to know is this:

• What is the reason(s) for this performance difference?
• Is this performance indicative of some best practice in javascript?

Thanks in advance guys.

EDIT: Thanks for the responses - as some have mentioned, further testing on my part seems to suggest that this issue is browser (or rather, Javascript compiler specific). I've tested additionally in Safari, IE 10 and Firefox. IE 10 and Firefox both gave results so close as to be no different. Safari executed the operations on Object2 slightly faster than those on Object1 (around 2% on average). I would like to know what the outlier (Other) is though, as the performance difference in that case appears to be substantial.

Answer 1

When you declare a function, its prototype attribute is initialised with an object containing a default constructor.

With Object1, you are adding an attribute to the existing prototype function. With Object2, you are replacing the existing prototype with a constructor-less of your own.

The two are not identical.

Why are the speeds different? Well, V8 could be adding a constructor function to your object2 prototype every time you create an instance.

Or more likely, the preexisting prototype function is implemented in machine code to make it faster, and when you assign your own object to Object2.prototype, the prototype function is now pure javascript and therefore slower.

The details are not that important, because different interpreters will handle this differently, what is important is to realize that Object1 and Object2 are not exactly the identical.