Property Getter / Setter Techniques

JavaScript performance comparison

Revision 25 of this test case created by

Preparation code

<script>
  var global = this;

  (function() {
    global.obj1 = {
      start: {
        row: 1,
        col: 1
      }
    };

    global.obj2 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      }
    };

    global.obj4 = {
      _start: 1,
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      }
    };

    global.obj5 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row += delta;
      }
    };


    global.obj6 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modify: function(key, delta) {
        this[key] += delta;
      }
    };

    global.obj7 = {
      _start: {
        row: 1,
        col: 1
      },
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row = this.row + delta;
      }
    };


    function Cell() {
      this._start = {
        row: 1,
        col: 1
      }
    }
    Cell.prototype = {
      start: function(val) {
        if (val) {
          this._start = val
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row = this.row + delta;
      },
      modifyCol: function(delta) {
        this.col = this.col + delta;
      }
    };
    global.obj8 = new Cell();
    global.obj9 = new Cell();

    function Cell2() {
      this._start = {
        row: 1,
        col: 1
      }
    }
    Cell2.prototype = {
      start: function(val) {
        if (val) {
          this._start.row = val.row;
          this._start.col = val.col;
        } else {
          return this._start;
        }
      },
      modifyRow: function(delta) {
        this.row = this.row + delta;
      },
      modifyCol: function(delta) {
        this.col = this.col + delta;
      }
    };
    global.obj10 = new Cell2();
  })();
</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
Direct property change
var old = global.obj1.start;
global.obj1.start = {
  row: old.row + 1,
  col: old.col
}
pending…
Getter/setter method
var old = global.obj2.start();
global.obj2.start({
  row: old.row + 1,
  col: old.col
});
pending…
Direct property change w/body
var old = global.obj1.start;
global.obj1.start = {
  row: old.row + 1,
  col: old.col,
  element: document.getElementsByTagName('DIV')[0]
}
pending…
Primitive
var old = global.obj4.start();
global.obj4.start(old + 1);
pending…
Modify row
global.obj5.modifyRow(1);
pending…
Modify [key]
global.obj6.modify('row', 1);
pending…
Modify row without sugar
global.obj7.modifyRow(1);
pending…
Using an object
global.obj8.modifyRow(1);
pending…
Set all object
global.obj9.start({
  row: 4,
  col: 7
});
pending…
Set all object (using props)
global.obj10.start({
  row: 4,
  col: 7
});
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