Multiple Class Systems

JavaScript performance comparison

Revision 2 of this test case created by

Preparation code 

<script src="https://rawgithub.com/nicolas-van/ring.js/master/underscore.js" type="text/javascript"></script>
<script src="https://rawgithub.com/nicolas-van/ring.js/master/ring.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jrclass.js">
</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/klass.js">
</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/classy.js">
</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/ptclass.js">
</script>
<script src="http://cdn.sencha.com/ext-4.1.1a-gpl/builds/ext-foundation.js">
</script>
<script src="http://indigounited.com/dejavu/dejavu.js">
</script>
<script src="https://rawgithub.com/weikinhuang/Classify/master/dist/classify.js"></script>
<script>
  var RingPerson = ring.create({
    init: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });
  var RingFrenchGuy = ring.create([RingPerson], {
    init: function(name) {
      this.$super(name);
    },
    setAddress: function(city, street) {
      this.$super('France', city, street);
    }
  });

  var RingParisLover = ring.create([RingFrenchGuy], {
    init: function(name) {
      this.$super(name);
    },
    setAddress: function(street) {
      this.$super('Paris', street);
    }
  });
</script>
<script>
  var JRPerson = JRClass.extend({
    init: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    },
    sayHello: function() {
      console.log('I am ' + this.name + '. My address is ' + this.country + ', ' + this.city + ', ' + this.street + '.');
    }
  });

  var JRFrenchGuy = JRPerson.extend({
    init: function(name) {
      this._super(name);
    },
    setAddress: function(city, street) {
      this._super('France', city, street);
    }
  });

  var JRParisLover = JRFrenchGuy.extend({
    init: function(name) {
      this._super(name);
    },
    setAddress: function(street) {
      this._super('Paris', street);
    }
  });
</script>
<script>
  var EnderPerson = klass(function(name) {
    this.name = name;
  }).methods({
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var EnderFrenchGuy = EnderPerson.extend(function(name) {}).methods({
    setAddress: function(city, street) {
      this.supr('France', city, street);
    }
  });

  var EnderParisLover = EnderFrenchGuy.extend(function(name) {}).methods({
    setAddress: function(street) {
      this.supr('Paris', street);
    }
  });
</script>
<script>
  var ClassyPerson = Classy.$extend({
    __init__: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var ClassyFrenchGuy = ClassyPerson.$extend({
    __init__: function(name) {
      this.$super(name);
    },
    setAddress: function(city, street) {
      this.$super('France', city, street);
    }
  });

  var ClassyParisLover = ClassyFrenchGuy.$extend({
    __init__: function(name) {
      this.$super(name);
    },
    setAddress: function(street) {
      this.$super('Paris', street);
    }
  });
</script>
<script>
  var PTClassPerson = PTClass.create({
    initialize: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var PTClassFrenchGuy = PTClass.create(PTClassPerson, {
    initialize: function($super, name) {
      $super(name);
    },
    setAddress: function($super, city, street) {
      $super('France', city, street);
    }
  });

  var PTClassParisLover = PTClass.create(PTClassFrenchGuy, {
    initialize: function($super, name) {
      $super(name);
    },
    setAddress: function($super, street) {
      $super('Paris', street);
    }
  });
</script>
<script>
  Ext.define('ExtPerson', {
    constructor: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  Ext.define('ExtChinaGuy', {
    extend: 'ExtPerson',
    constructor: function() {
      this.callParent(arguments);
    },
    setAddress: function(city, street) {
      this.callParent(['China', city, street]);
    }
  });

  Ext.define('ExtBeiJingLover', {
    extend: 'ExtChinaGuy',
    constructor: function(name) {
      this.callParent(arguments);
    },
    setAddress: function(street) {
      this.callParent(['BeiJing', street]);
    }
  });
</script>
<script>
  var dejavuClassPerson = dejavu.Class.declare({
    initialize: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var dejavuClassFrenchGuy = dejavu.Class.declare({
    $extends: dejavuClassPerson,
    initialize: function(name) {
      this.$super(name);
    },
    setAddress: function(city, street) {
      this.$super('France', city, street);
    }
  });

  var dejavuClassParisLover = dejavu.Class.declare({
    $extends: dejavuClassFrenchGuy,
    initialize: function(name) {
      this.$super(name);
    },
    setAddress: function(street) {
      this.$super('Paris', street);
    }
  });
</script>
<script>
  var ClassifyPerson = Classify({
    init: function (name) {
      this.name = name;
    },

    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });
  
  var ClassifyFrenchGuy = Classify(ClassifyPerson, {
    init: function (name) {
      this.parent(name);
    },
    setAddress: function(city, street) {
      this.parent("France", city, street);
    }
  });

  var ClassifyParisLover = Classify(ClassifyFrenchGuy, {
    init: function (name) {
      this.parent(name);
    },
    setAddress: function(street) {
      this.parent("Paris", street);
    }
  });
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Ring.js 
var p69 = new RingParisLover("Mary");
p69.setAddress("CH");
 pending…
John Resig's 
var p9 = new JRParisLover("Mary");
p9.setAddress("CH");
 pending…
Klass 
var p12 = new EnderParisLover("Mary");
p12.setAddress("CH");
 pending…
Classy 
var p15 = new ClassyParisLover("Mary");
p15.setAddress("CH");
 pending…
PTClass 
var p18 = new PTClassParisLover("Mary");
p18.setAddress("CH");
 pending…
Ext 
var p27 = new ExtBeiJingLover("Mary");
p27.setAddress("CH");
 pending…
dejavu 
var p33 = new dejavuClassParisLover("Mary");
p33.setAddress("CH");
 pending…
Classifyjs 
var p52 = new ClassifyParisLover("Mary");
p52.setAddress("CH");
 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.

0 Comments