Extend (mixin) vs prototypes

JavaScript performance comparison

Test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>



      
<script>
Benchmark.prototype.setup = function() {
  var person = {
          name: null,
          lastName: null,
          age: null,
          isMajor: function () { return this.age > 18; },
          getFullName: function () {
              return this.name + ' ' + this.lastName; 
          },
          doSomething: function () {},
          doSomethingElse: function () {}
      },
      data = { name: 'Foo', lastName: 'Bar', age: 18 };
  
  function NormalPerson(name, lastName, age) {
      this.name = name;
      this.lastName = lastName;
      this.age = age;
  }
  NormalPerson.prototype = person;
  
  function DataPerson(data) {
      this.name = data.name;
      this.lastName = data.lastName;
      this.age = data.age;
  }
  DataPerson.prototype = person;
  
  
  function ExtendPerson(data) {
      $.extend(this, data);
  }
  ExtendPerson.prototype = person;

};
</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
Normal constructor
new NormalPerson('Foo', 'Bar', 18);
pending…
Constructor using extend
new ExtendPerson(data);
pending…
Construtor using a data object
new DataPerson(data);
pending…
Pure extend
$.extend({}, person, data);
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