mixin-fun-options

JavaScript performance comparison

Test case created by Kaleb

Info

After reading A Fresh Look at JavaScript Mixins, I was curious which mixin format was the most performant when the developer did want to have "options".

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    function area() {
      return Math.PI * this.radius * this.radius;
    }
   
    function grow(growBy) {
      this.radius += growBy;
    }
   
    function shrink(shrinkBy) {
      this.radius -= shrinkBy;
    }
   
    var slice = Array.prototype.slice;
   
    Function.prototype.curry = function() {
      var fn = this,
        args = slice.call(arguments, 0);
      return function() {
        return fn.apply(this, args.concat(slice.call(arguments, 0)));
      };
    };
   
    function curry(fn) {
      var args = slice.call(arguments, 1);
      return function() {
        return fn.apply(this, args.concat(slice.call(arguments, 0)));
      }
    }
   
    Function.prototype.partial = function(args) {
      var fn = this;
      return function() {
        return fn.apply(this, args.concat(slice.call(arguments, 0)));
      };
    }
   
    function partial(fn, args) {
      return function() {
        return fn.apply(this, args.concat(slice.call(arguments, 0)));
      }
    }
   
    var opts = {
      growBy: 2,
      shrinkBy: 2
    };
   
    //set up test constructor
   
    function CircularObject(radius) {
      this.radius = radius;
    }
};
</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
bind
function asCircle(options) {
  this.area = area;
  this.grow = grow.bind(this, options.growBy);
  this.shrink = shrink.bind(this, options.shrinkBy);
}

asCircle.call(CircularObject.prototype, opts)
var obj = new CircularObject(4)
obj.shrink();
pending…
curry (as Function method)
function asCircle(options) {
  this.area = area;
  this.grow = grow.curry(options.growBy);
  this.shrink = shrink.curry(options.shrinkBy);
}

asCircle.call(CircularObject.prototype, opts);
var obj = new CircularObject(4);
obj.shrink();
pending…
inline
function asCircle(options) {
  this.area = area;
  this.grow = function() {
    this.radius += options.growBy;
  };
  this.shrink = function() {
    this.radius -= options.shrinkBy;
  };
}

asCircle.call(CircularObject.prototype, opts);
var obj = new CircularObject(4);
obj.shrink();
pending…
wrapped and called
function asCircle(options) {
  this.area = area;
  this.grow = function() {
    return grow.call(this, options.growBy);
  };
  this.shrink = function() {
    return shrink.call(this, options.shrinkBy);
  };
}

asCircle.call(CircularObject.prototype, opts);
var obj = new CircularObject(4);
obj.shrink();
pending…
partial (as function)
function asCircle(options) {
  this.area = area;
  this.grow = partial(grow, [options.growBy]);
  this.shrink = partial(shrink, [options.shrinkBy]);
}

asCircle.call(CircularObject.prototype, opts);
var obj = new CircularObject(4);
obj.shrink();
pending…
partial (as Function method)
function asCircle(options) {
  this.area = area;
  this.grow = grow.partial([options.growBy]);
  this.shrink = shrink.partial([options.shrinkBy]);
}

asCircle.call(CircularObject.prototype, opts);
var obj = new CircularObject(4);
obj.shrink();
pending…
curry (as function)
function asCircle(options) {
  this.area = area;
  this.grow = curry(grow, options.growBy);
  this.shrink = curry(shrink, options.shrinkBy);
}

asCircle.call(CircularObject.prototype, opts);
var obj = new CircularObject(4);
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