JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 174 of this test case created by alban

Preparation code

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jsface.js">
</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/my.class.js">
</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jrclass.js">
</script>
<script>
function createClass( definition ) {
	var $ = definition.$,
		baseClass 	= definition.base,
		proto 		= definition.proto;
	// Create the constructor, if not present in the definition.
	!$ && ( $ = function() {
		baseClass && this.base.apply( this, arguments );
	} );

	if ( baseClass ) {
		//Copy Parent methods
		$.prototype = Object.create( baseClass.prototype );

		//Set the constructor function
		$.prototype.constructor = $;
		
		// Super references.
		$.base 		= baseClass;
		$.baseProto = baseClass.prototype;
		// Super constructor.
		$.prototype.base = function() {
			this.base = baseClass.prototype.base;
			baseClass.apply( this, arguments );
			this.base = createClass;
		};
	}
	
		// Overriding parent methods
    for (var name in proto) {
		$.prototype[name] = proto[name];
    }

	return $;
}
</script>

<script>

  var __hasProp = {}.hasOwnProperty,
      __extends = function(child, parent) {
      for (var key in parent) {
        if (__hasProp.call(parent, key)) child[key] = parent[key];
      }

      function ctor() {
        this.constructor = child;
      }
      ctor.prototype = parent.prototype;
      child.prototype = new ctor();
      child.__super__ = parent.prototype;
      return child;
      };

  var JSFacePerson = jsface.Class({
    constructor: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var JSFaceFrenchGuy = jsface.Class(JSFacePerson, {
    constructor: function(name) {
      JSFaceFrenchGuy.$super.call(this, name);
    },
    setAddress: function(city, street) {
      JSFaceFrenchGuy.$superp.setAddress.call(this, 'France', city, street);
    }
  });

  var JSFaceParisLover = jsface.Class(JSFaceFrenchGuy, {
    constructor: function(name) {
      JSFaceParisLover.$super.call(this, name);
    },
    setAddress: function(street) {
      JSFaceParisLover.$superp.setAddress.call(this, 'Paris', street);
    }
  });

  var MyPerson = my.Class({
    constructor: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var MyFrenchGuy = my.Class(MyPerson, {
    constructor: function(name) {
      MyFrenchGuy.Super.call(this, name);
    },
    setAddress: function(city, street) {
      MyFrenchGuy.Super.prototype.setAddress.call(this, 'France', city, street);
    }
  });

  var MyParisLover = my.Class(MyFrenchGuy, {
    constructor: function(name) {
      MyParisLover.Super.call(this, name);
    },
    setAddress: function(street) {
      MyParisLover.Super.prototype.setAddress.call(this, 'Paris', street);
    }
  });

  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);
    }
  });


var aPerson = createClass({
	$: function(name){
		console.log('constructor 1');
		this.name = name;
		console.log(name);
	},
	proto:  {
		setAddress: function (country, city, street) {
			this.country = country;
			this.city = city;
			this.street = street;
			console.log('setAddress 1');
		},
		sayHello: function () {
			console.log('I am ' + this.name + '. My address is ' + this.country + ', ' + this.city + ', ' + this.street + '.');
		}
	}
});


var aFrenchGuy = createClass({
	base: aPerson,
	$: function(name){
		console.log('constructor 2');
		this.base( name );
	},
	proto:  {
		setAddress: function (city, street) {
			console.log('setAddress 2');
			aPerson.prototype.setAddress.call(this, 'France', city, street);
		}
	}
});



var aParisLover = createClass({
	base: aFrenchGuy,
	$: function (name) {
		console.log('constructor 3');
		this.base( name );
	},
	proto:  {
		setAddress: function (street) {
			console.log('setAddress 3');
			aFrenchGuy.prototype.setAddress.call(this, 'Paris', street);
		}
	}
});



</script>
    

Preparation code output

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/my.class.js"> </script> <script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jrclass.js"> </script> <script> function createClass( definition ) { var $ = definition.$, baseClass = definition.base, proto = definition.proto; // Create the constructor, if not present in the definition. !$ && ( $ = function() { baseClass && this.base.apply( this, arguments ); } ); if ( baseClass ) { //Copy Parent methods $.prototype = Object.create( baseClass.prototype ); //Set the constructor function $.prototype.constructor = $; // Super references. $.base = baseClass; $.baseProto = baseClass.prototype; // Super constructor. $.prototype.base = function() { this.base = baseClass.prototype.base; baseClass.apply( this, arguments ); this.base = createClass; }; } // Overriding parent methods for (var name in proto) { $.prototype[name] = proto[name]; } return $; } </script> <script> var __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; var JSFacePerson = jsface.Class({ constructor: function(name) { this.name = name; }, setAddress: function(country, city, street) { this.country = country; this.city = city; this.street = street; } }); var JSFaceFrenchGuy = jsface.Class(JSFacePerson, { constructor: function(name) { JSFaceFrenchGuy.$super.call(this, name); }, setAddress: function(city, street) { JSFaceFrenchGuy.$superp.setAddress.call(this, 'France', city, street); } }); var JSFaceParisLover = jsface.Class(JSFaceFrenchGuy, { constructor: function(name) { JSFaceParisLover.$super.call(this, name); }, setAddress: function(street) { JSFaceParisLover.$superp.setAddress.call(this, 'Paris', street); } }); var MyPerson = my.Class({ constructor: function(name) { this.name = name; }, setAddress: function(country, city, street) { this.country = country; this.city = city; this.street = street; } }); var MyFrenchGuy = my.Class(MyPerson, { constructor: function(name) { MyFrenchGuy.Super.call(this, name); }, setAddress: function(city, street) { MyFrenchGuy.Super.prototype.setAddress.call(this, 'France', city, street); } }); var MyParisLover = my.Class(MyFrenchGuy, { constructor: function(name) { MyParisLover.Super.call(this, name); }, setAddress: function(street) { MyParisLover.Super.prototype.setAddress.call(this, 'Paris', street); } }); 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); } }); var aPerson = createClass({ $: function(name){ console.log('constructor 1'); this.name = name; console.log(name); }, proto: { setAddress: function (country, city, street) { this.country = country; this.city = city; this.street = street; console.log('setAddress 1'); }, sayHello: function () { console.log('I am ' + this.name + '. My address is ' + this.country + ', ' + this.city + ', ' + this.street + '.'); } } }); var aFrenchGuy = createClass({ base: aPerson, $: function(name){ console.log('constructor 2'); this.base( name ); }, proto: { setAddress: function (city, street) { console.log('setAddress 2'); aPerson.prototype.setAddress.call(this, 'France', city, street); } } }); var aParisLover = createClass({ base: aFrenchGuy, $: function (name) { console.log('constructor 3'); this.base( name ); }, proto: { setAddress: function (street) { console.log('setAddress 3'); aFrenchGuy.prototype.setAddress.call(this, 'Paris', street); } } }); </script>

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
JSFace
var p3 = new JSFaceParisLover("Mary");
p3.setAddress("CH");
pending…
my.Class
var p6 = new MyParisLover("Mary");
p6.setAddress("CH");
pending…
John Resig Class
var p9 = new JRParisLover("Mary");
p9.setAddress("CH");
pending…
zClass
var p10 = new aParisLover("Mary");
p10.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