Object Creation Patterns. Function Invocation vs Constructor Invocation vs Method Invocation. Plus running their methods

JavaScript performance comparison

Revision 111 of this test case created by Kim Carter

Info

Added simple function invocation and tailored the tests to suite the blog post I was writing. Plus added calls to the methods.

The most important thing to remember is to use the right tool for the job. All these tests do is reference an object with a complex memory allocation. When you don't need something fancy, you're better off using a regular old object

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    // Setup function constructor.
    var AFunctionConstructor = function () {
       var myString = 'a string';
       var foo = function () {
          return myString;
       };
       this.bar = function () {
          return foo();
       };
    };
   
    // Setup function constructor with functions added to the prototype.
    var AFunctionConstructorWithPrototypeAdditions = function () {
       this.myString = 'a string';
    };
    AFunctionConstructorWithPrototypeAdditions.prototype.foo = function () {
       return this.myString;
    };
    AFunctionConstructorWithPrototypeAdditions.prototype.bar = function () {
       return this.foo(); // think we need this here.
    };
   
   
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Simple function invocation.
var myFunctionInvocation = function () {
   var myString = 'a string';
   var foo = function () {
      return myString;
   };
   return function () {
      return foo();
   }();
};
 
pending…
Function constructor invocation.
var myFunctionConstructor = new AFunctionConstructor();

 
pending…
Function constructor invocation with functions added to the prototype.
var myFunctionConstructorWithPrototypeAdditions = new AFunctionConstructorWithPrototypeAdditions();

 
pending…
Object literal invocation.
var myObjectLiteral = {
   myString: 'a string',
   foo: function () {
      return this.myString;
   },
   bar: function () {
      return this.foo();
   }
};
 
pending…
Simple function invocation. Plus method call.
var myFunctionInvocation = function () {
   var myString = 'a string';
   var foo = function () {
      return myString;
   };
   return function () {
      return foo();
   }();
};
myFunctionInvocation();
pending…
Function constructor invocation. Plus method call.
var myFunctionConstructor = new AFunctionConstructor();
myFunctionConstructor.bar();
pending…
Function constructor invocation with functions added to the prototype. Plus method call.
var myFunctionConstructorWithPrototypeAdditions = new AFunctionConstructorWithPrototypeAdditions();
myFunctionConstructorWithPrototypeAdditions.bar();
pending…
Object literal invocation. Plus method call.
var myObjectLiteral = {
   myString: 'a string',
   foo: function () {
      return this.myString;
   },
   bar: function () {
      return this.foo();
   }
};
myObjectLiteral.bar();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment