Write getters as a prototype

Question

I'm working on making performance updates on my javascript code.

In Firefox I got this warning:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

I wrote some scripts to prove this, and the results are great: without mutation a simple script runs 66% faster.

But I have trouble converting my code without mutation, I can't write the getters:

This is what I have now:

// Class
function FooBar(options) {
  this.options = options;
}

// Prototype
FooBar.prototype = {

  // Getters
  get a() {
      return this.options.a;
    },

    get b() {
      return this.options.b;
    },

    get ab() {
      return this.options.a + this.options.b;
    },

    // Methods
    displayOptions: function() {
      console.log(this.options);
    }
};

// Code
var options = {
  a: 'foo',
  b: 'bar'
};

var fooBar = new FooBar(options);

console.log(fooBar.a);
console.log(fooBar.b);
console.log(fooBar.ab);
fooBar.displayOptions();

The getters as a prototype using the this keyword in their return are the problem.

If I use Object.defineProperty the this keyword is wrong, unless I do it inside the constructor, but it would recreate the property on each instance of the class and slow my code down even further.

"If I use Object.defineProperty the this keyword is wrong.." - no, it isn't. It will behave the same in both cases, depending on the receiver object. "..but it would recreate the property on each instance of the class" - probably not, but it depends on what is meant. I really don't see how any of this code has to do with 'mutating the [[Prototype]]'.. — user2864740, Aug 18 '15 at 07:59
Indeed I've always wondered why [MDN says that](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf). It's just plain wrong. Anyway, in your code, `FooBar.prototype` doesn't change the prototype of `FooBar`, but only the prototype of new objects created by that constructor. — GOTO 0, Aug 18 '15 at 08:07
@user2864740 ""If I use Object.defineProperty the this keyword is wrong.." - no, it isn't." You're right, it isn't. I messed up the syntax while trying. This is mutation: look at this thread: http://stackoverflow.com/questions/23807805/why-is-mutating-the-prototype-of-an-object-bad-for-performance — artex, Aug 18 '15 at 09:11

artex · Accepted Answer · 2015-08-18T09:40:34.383

This works (I just messed up the syntax in my previous attempt):

// Class
function FooBar (options) {
 this.options = options;
}

//Prototype getters
Object.defineProperty(FooBar.prototype, 'a', {
 get: function() {
  return this.options.a;
 }
});

Object.defineProperty(FooBar.prototype, 'b', {
 get: function() {
  return this.options.b;
 }
});


Object.defineProperty(FooBar.prototype, 'ab', {
 get: function() {
  return this.options.a + this.options.b;
 }
});

// Methods
FooBar.prototype.displayOptions = function() {
 console.log(this.options);
};

// Code
var options = {
 a:'foo',
 b:'bar'
};

var fooBar = new FooBar (options);

console.log(fooBar.a);
console.log(fooBar.b);
console.log(fooBar.ab);
fooBar.displayOptions();

For those who are curious about the benefits of converting scripts like this to run faster: Run following code and look to your output in the console (Chrome - 66% faster, Firefox - no difference (curious, since I got the warning from Firefox)):

// WITHOUT PROTOTYPING
var Person1 = function() {
 this.name = 'myName';
 this.changeName = function(name) {
  this.name = name;
 };
 this.changeName2 = function(name) {
  this.name = name;
 };
 this.changeName3 = function(name) {
  this.name = name;
 };
 this.changeName4 = function(name) {
  this.name = name;
 };
}


// WITH PROTOTYPING, WITH MUTATION
var Person2 = function() {
 this.name = 'myName';
}
Person2.prototype = {
 changeName: function(name) {
  this.name = name;
 },
 changeName2: function(name) {
  this.name = name;
 },
 changeName3: function(name) {
  this.name = name;
 },
 changeName4: function(name) {
  this.name = name;
 }
};

// WITH PROTOTYPING, WITHOUT MUTATION
var Person3 = function() {
 this.name = 'myName';
}
Person3.prototype.changeName = function(name) {
 this.name = name;
};
Person3.prototype.changeName2 = function(name) {
 this.name = name;
};
Person3.prototype.changeName3 = function(name) {
 this.name = name;
};
Person3.prototype.changeName4 = function(name) {
 this.name = name;
};


// DO THE TEST
var i=0, len=1000000;

// TEST1
window.performance.mark('mark_test_start');
for(i=0;i<len;i++) {
 p = new Person1();
 p.changeName('myName2');
}
window.performance.mark('mark_test_end');
window.performance.measure('no-prototyping', 'mark_test_start', 'mark_test_end');


// TEST2
window.performance.mark('mark_test2_start');
for(i=0;i<len;i++) {
 p = new Person2();
 p.changeName('myName2');
}
window.performance.mark('mark_test2_end');
window.performance.measure('prototyping-with-mutation', 'mark_test2_start', 'mark_test2_end');

// TEST3
window.performance.mark('mark_test3_start');
for(i=0;i<len;i++) {
 p = new Person2();
 p.changeName('myName2');
}
window.performance.mark('mark_test3_end');
window.performance.measure('prototyping-without-mutation', 'mark_test3_start', 'mark_test3_end');



// OUTPUT tests
var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length; ++i) {
  var req = items[i];
  console.log(req.name + ': ' + req.duration.toFixed(2));
}

Write getters as a prototype

1 Answers1