mixin fun

JavaScript performance comparison

Revision 20 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  //1
  var circleFns = {
    area: function() {
      return Math.PI * this.radius * this.radius;
    },
    grow: function() {
      this.radius++;
    },
    shrink: function() {
      this.radius--;
    }
  }

  //2
  var asCircle = function() {
      this.area = function() {
        return Math.PI * this.radius * this.radius;
      };
      this.grow = function() {
        this.radius++;
      };
      this.shrink = function() {
        this.radius--;
      };
      }
     
     
     
      //3
     
  var asCircleCached = (function() {
    var area = function() {
        return Math.PI * this.radius * this.radius;
        };
    var grow = function() {
        this.radius++;
        };
    var shrink = function() {
        this.radius--;
        };
    return function() {
      this.area = area, this.grow = grow, this.shrink = shrink;
    }
  })();

  //4
  Function.prototype.curry = function() {
    var fn = this;
    var args = [].slice.call(arguments, 0);
    return function() {
      return fn.apply(this, args.concat([].slice.call(arguments, 0)));
    }
  }

  //4
  var asCircleCachedAndCurried = (function() {
    var area = function() {
        return Math.PI * this.radius * this.radius;
        };
    var grow = function(growBy) {
        this.radius += growBy;
        };
    var shrink = function(shrinkBy) {
        this.radius -= shrinkBy;
        };
    return function(options) {
      this.area = area, this.grow = grow.curry(options['growBy']), this.shrink = shrink.curry(options['shrinkBy'])
    }
  })();

  //5
  var asCircleWithOptions = function(options) {
      this.area = function() {
        return Math.PI * this.radius * this.radius;
      };
      this.grow = function() {
        this.radius += options.growBy;
      };
      this.shrink = function() {
        this.radius -= options.shrinkBy;
      };
      }
     
     
     
      //set up test constructor
     
  var CircularObject = function(radius) {
      this.radius = radius
      };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
old style
for (var k in circleFns) {
  if (circleFns.hasOwnProperty(k)) {
    CircularObject.prototype[k] = circleFns[k]
  };
}
var obj = new CircularObject(4);
obj.shrink();
pending…
new style
asCircle.call(CircularObject.prototype);
var obj = new CircularObject(4);
obj.shrink();
pending…
new style w/ caching
asCircleCached.call(CircularObject.prototype);
var obj = new CircularObject(4);
obj.shrink();
pending…
new style w/caching and options
asCircleCachedAndCurried.call(
CircularObject.prototype, {
  growBy: 2,
  shrinkBy: 2
});
var obj = new CircularObject(4);
obj.shrink();
pending…
object.create
var obj = Object.create(circleFns);
obj.shrink()
pending…
$.extend
$.extend(CircularObject.prototype, circleFns);
var obj = new CircularObject(4);
obj.shrink();
pending…
simply new()
var obj = new CircularObject(4);
obj.shrink();
pending…
simply Object.create()
var obj = Object.create(CircularObject.prototype);
CircularObject.call(obj);
obj.shrink();
pending…
simply Object.create() w/o constructor
var obj = Object.create(CircularObject.prototype);
obj.shrink();
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