Closure vs. property

JavaScript performance comparison

Revision 10 of this test case created by Paul Masurel

Info

Add the constructor call to the test to see how that affects performance, since a lot of constructors are called every time they are used versus once for every action.

Preparation code

<script>
function ClosureColor(name) {
    // Have no choice but to add these methods to the instance
    this.getName = function () {
        return name;
    };
    this.setName = function (n) {
        name = n;
    };
}

window.closureColor = new ClosureColor('green');


function ClosureReturnColor(name) {
    // Return object instead of attaching to Function
    return {
      getName: function () {
        return name;
      },
      setName: function (n) {
        name = n;
      }
    }
}

var propertyColor = new PropertyColor('green');

function PropertyColor(name) {
    this._name = name;
    this.getName = function () {
        return this._name;
    };
    this.setName = function (n) {
        this._name = n;
    };
}



function PrototypeColor(name) {
    this._name = name;
}
PrototypeColor.prototype.getName = function () {
    return this._name;
};
PrototypeColor.prototype.setName = function (n) {
    this._name = n;
};
window.prototypeColor = new PrototypeColor('green');


function GetterSetterColor(name){
    var value = name;
   
    this.__defineGetter__("name", function(){
        return value;
    });
   
    this.__defineSetter__("name", function(val){
        value = val;
    });
}

window.closureReturnColor = new ClosureReturnColor('green');
window.getterSetter = new GetterSetterColor('green');
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Closure
var name = closureColor.getName();
closureColor.setName('blue');
pending…
Property

var name = propertyColor.getName();
propertyColor.setName('blue');
pending…
Prototype

var name = prototypeColor.getName();
prototypeColor.setName('blue');
pending…
Closure Return

var name = closureReturnColor.getName();
closureReturnColor.setName('blue');
pending…
Getter Setter

var name = getterSetter.name;
getterSetter.name = 'blue';
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. Here’s a list of current revisions for this page:

0 comments

Add a comment