Object Creation Pattern Performance Andy Appleton @appltn http://appleton.me 

Two popular patterns for making objects 

Module Pattern var Module = function(arg){ var self = { getArg: function(){ return arg1; } }; return self; }; 

Constructor Functions var Constructor = function(arg){ this.arg = arg; }; Constructor.prototype.getArg = function(){ return this.arg; }; 

Smackdown vs 

jsperf.com 

Test 1: Object Instantiation var doug = new Module('arg'); var bono = new Constructor('arg'); 

Test 1: Object Instantiation Chrome 20 Firefox 13 IE 9 Safari 5.1 Module Constructor +30% (operations/sec) 

0 - 1 

Test 2: Method Calls doug.getArg(); bono.getArg(); 

Test 2: Method Calls Chrome 20 Firefox 13 IE 9 Safari 5.1 Module Constructor +57% (operations/sec) 

1 - 1 

Test 2.5: Instantiation & Method Calls var doug = new Module('arg'); doug.getArg(); var bono = new Constructor('arg'); bono.getArg(); 

Chrome 20 Firefox 13 IE 9 Safari 5.1 Test 2.5: Instantiation & Method Calls Module Constructor +61% (operations/sec) 

1 - 2 

Test 3: Instantiation with inheritance var Module = function(arg1){ // Set up and return self object }; var ModuleChild = function(arg1, arg2){ var self = new Module(arg1); self.method = function(){}; return self; }; 

Test 3: Instantiation with inheritance var Constructor = function(arg1){}; // Add methods to Constructor.prototype var Child = function(arg1, arg2){ // Add instance variables to `this` }; Child.prototype = new Constructor(this.arg1); Child.prototype.method = function(){}; 

Test 3: Instantiation with inheritance var doug = new ModuleChild('arg', 'arg'); var bono = new ConstructorChild('arg', 'arg'); 

Chrome 20 Firefox 13 IE 9 Safari 5.1 Test 3: Instantiation with inheritance Module Constructor +93% (operations/sec) 

1 - 3 

Test 4: Method calls with inheritance doug.getArg1(); doug.getArg2(); bono.getArg1(); bono.getArg2(); 

Chrome 20 Firefox 13 IE 9 Safari 5.1 child method parent method child method parent method Test 4: Method calls with inheritance Module Constructor +56% +53% (operations/sec) 

2 - 3 

Test 4.5: Instantiation & Method calls with inheritance var doug1 = new ModuleChild('arg', 'arg'); doug1.getArg1(); var doug2 = new ModuleChild('arg', 'arg'); doug2.getArg2(); var bono1 = new ConstructorChild('arg', 'arg'); bono1.getArg1(); var bono2 = new ConstructorChild('arg', 'arg'); bono2.getArg2(); 

Chrome 20 Firefox 13 IE 9 Safari 5.1 child method parent method child method parent method Test 4.5: Instantiation & Method calls with inheritance Module Constructor +92% +91% (operations/sec) 

2 - 4 

Constructor functions are faster to instantiate Use constructors if you’re going to have a lot of objects 

Modules are quicker to call methods on Use modules if you’re going to be calling a lot of methods 

Other factors... 

Bono > Crockford and apparently... 

1. Object instantiation http://jsperf.com/object-instantiation-test 2. Method calls on instantiated object http://jsperf.com/method-calling-test 2.5. Object instantiation and method calls http://jsperf.com/intantiation-and-method-call-test 3. Object instantiation with inheritance http://jsperf.com/instantiation-with-inheritance-test 4. Method calls on instantiated objects with inheritance http://jsperf.com/method-calling-with-inheritance-test 4.5. Object instantiation and method calls with inheritance http://jsperf.com/instantiation-and-method-call-test-with-inheritance