jQuery Class.create vs Prototype Class.create vs pure JS function (v14)

Revision 14 of this benchmark created on


Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://digg.googlecode.com/files/Class-0.0.2.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<script>
/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  // The base Class implementation (does nothing)
  this.Classy = function(){};
  
  // Create a new Classy that inherits from this Classy
  Classy.extend = function(prop) {
    var _super = this.prototype;
    
    // Instantiate a base Classy (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;
    
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
            
            // Add a new ._super() method that is the same method
            // but on the super-Classy
            this._super = _super[name];
            
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;
            
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
    
    // The dummy Classy constructor
    function Classy() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
    
    // Populate our constructed prototype object
    Classy.prototype = prototype;
    
    // Enforce the constructor to be what we expect
    Classy.prototype.constructor = Classy;

    // And make this Classy extendable
    Classy.extend = arguments.callee;
    
    return Classy;
  };
})();
</script>

Setup

var result = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Prototype Class.create
var Animal = Class.create({
  initialize: function(name, sound) {
    this.name  = name;
    this.sound = sound;
  },

  speak: function() {
    alert(this.name + " says: " + this.sound + "!");
  }
});
var cat = new Animal('Kitty', 'Meow');
cat.speak();
ready
Pure JS
function Animal(name, sound) {
  this.name = name;
  this.sound = sound;
}

Animal.prototype.speak = function() {
  result = (this.name + " says: " + this.sound + "!");
}

var cat = new Animal('Kitty', 'Meow');
cat.speak();
ready
Classy
var Animal = Classy.extend({
	init: function(name, sound)
	{
		this.name = name;
		this.sound = sound;
	},
	speak: function() {
		result = (this.name + " says: " + this.sound + "!");
	}
});

var cat = new Animal('Kitty', 'Meow');
cat.speak();
ready
var Animal = function(name, sound) {
	var name = name;
  var sound = sound;
  return {
    speak:function(){
        result = (this.name + " says: " + this.sound + "!");
     }
   };
}();
var cat = new Animal('Kitty', 'Meow');
cat.speak();
ready
jQuery Class.create
var Animal = Class.create({
  init: function(name, sound) {
    this.name = name;
    this.sound = sound;
  },
  speak: function() {
    result = (this.name + " says: " + this.sound + "!");
  }
});

var cat = new Animal('Kitty', 'Meow');
cat.speak();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.